npm - @microlight/core - Versions diffs - 0.9.9 → 0.11.0 - Mend

@microlight/core 0.9.9 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/server/app/layout.js +2 -18
package/dist/server/app/library/[[...f_path]]/ViewFolder.js +37 -66
package/dist/server/app/monitoring/MonitoringDashboard.js +329 -0
package/dist/server/app/monitoring/action.js +147 -0
package/dist/server/app/monitoring/page.js +8 -0
package/dist/server/app/tasks/[slug]/ViewTask.js +81 -173
package/dist/server/app/tasks/[slug]/runs/[r_id]/ViewRun.js +68 -164
package/dist/server/app/tasks/[slug]/runs/[r_id]/_components/DropdownActions/DropdownActions.js +19 -25
package/dist/server/components/Link.js +6 -15
package/dist/server/components/MLInput.js +19 -22
package/dist/server/components/Navbar/Navbar.js +25 -31
package/dist/server/components/Navbar/NavbarContainer.js +7 -20
package/dist/server/components/PageHeader.js +22 -54
package/dist/server/components/StatusChip.js +5 -5
package/dist/server/components/ui/alert.js +61 -0
package/dist/server/components/ui/badge.js +37 -0
package/dist/server/components/ui/breadcrumb.js +82 -0
package/dist/server/components/ui/button.js +65 -0
package/dist/server/components/ui/card.js +81 -0
package/dist/server/components/ui/dropdown-menu.js +222 -0
package/dist/server/components/ui/input.js +21 -0
package/dist/server/components/ui/label.js +20 -0
package/dist/server/components/ui/select.js +165 -0
package/dist/server/components/ui/stack.js +104 -0
package/dist/server/components/ui/table.js +77 -0
package/dist/server/components/ui/tabs.js +59 -0
package/dist/server/components/ui/typography.js +229 -0
package/dist/server/utils/css/cn.js +11 -0
package/package.json +15 -4
package/dist/server/components/Icon.js +0 -22

package/dist/server/app/layout.js CHANGED Viewed

@@ -2,35 +2,19 @@ import { Inter } from "next/font/google";
 const inter = Inter({
   subsets: ["latin"]
 });
+import "./globals.css";
 import TopLoader from "../components/TopLoader";
 // import ServiceWorkerRegistration from "@/components/ServiceWorkerRegistration";
 import NavbarContainer from "../components/Navbar/NavbarContainer";
 export const metadata = {
   title: "Microlight",
   description: "Simple single server task runner"
-  // icons: {
-  //   icon: [
-  //     { url: '/favicon.ico' },
-  //     { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
-  //     { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
-  //     { url: '/favicon-48x48.png', sizes: '48x48', type: 'image/png' },
-  //   ],
-  //   apple: [
-  //     { url: '/apple-touch-icon.png' },
-  //   ],
-  // },
 };
 export default function RootLayout({
   children
 }) {
   return <html lang="en">
-      <head>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-      </head>
-      <body className={inter.className} style={{
-      margin: 0,
-      padding: 0
-    }}>
+      <body className={`${inter.className} m-0 p-0`}>
         {/* <ServiceWorkerRegistration /> */}
         <TopLoader />
         <NavbarContainer>

package/dist/server/app/library/[[...f_path]]/ViewFolder.js CHANGED Viewed

@@ -1,13 +1,11 @@
 'use client';
-import { Table, Box, Container, Typography } from '@mui/joy';
 import React from 'react';
-import Icon from "../../../components/Icon";
-// import Link from '@/components/Link';
-import { Link } from 'switchless';
+import { Folder, Send } from 'lucide-react';
+import Link from "../../../components/Link";
 import PageHeader from "../../../components/PageHeader";
+import { Typography } from "../../../components/ui/typography";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../components/ui/table";
 function generateBreadcrumbs({
   params
 }) {
@@ -47,67 +45,40 @@ export default function ViewFolder({
     params
   });
   const dir = params.f_path ? '/' + params.f_path?.join('/') : '';
-  return <>
-    <Container>
+  return <div className="max-w-7xl mx-auto">
       <PageHeader breadcrumbs={breadcrumbs} header={{
-        part1: 'Folder:',
-        part2: folder.name
-      }} />
+      part1: 'Folder:',
+      part2: folder.name
+    }} />
       <Typography level='body-sm'>{folder.description}</Typography>
-      <Table sx={{
-        pt: 1,
-        "--Table-headerUnderlineThickness": "2px",
-        "--TableCell-height": "25px"
-      }}>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Description</th>
-            <th>Tasks</th>
-          </tr>
-        </thead>
-        <tbody>
-          {contents.map(content => {
-            return <React.Fragment key={`${content.type}__${content.slug}`}>
-              <tr>
-                <td>
-                  {content.type == 'folder' && <>
-                    <Box sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 1
-                    }}>
-                    {/* <Icon icon='folder' color='#444444'/> */}
-                    <i class="fa-regular fa-folder fa-xl"></i>
-                    <Link href={'/library' + '/' + content.slug}>{content.name}</Link>
-                    </Box>
-                  </>}
-                  {content.type == 'task' && <>
-                    <Box sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 1
-                    }}>
-                      {/* <Icon icon='send' color='#6435c9'/> */}
-                      <i class="fa-solid fa-paper-plane fa-xl" style={{
-                        color: '#6435c9'
-                      }}></i>
-                      <Link href={'/tasks/' + content.slug}>{content.name}</Link>
-                    </Box>
-                  </>}
-                </td>
-                <td>{content.description}</td>
-                <td></td>
-              </tr>
-            </React.Fragment>;
+      <div className="mt-2">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Description</TableHead>
+              <TableHead>Tasks</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {contents.map(content => {
+            return <TableRow key={`${content.type}__${content.slug}`}>
+                  <TableCell>
+                    {content.type == 'folder' && <div className="flex items-center gap-2">
+                        <Folder className="h-5 w-5 text-muted-foreground" />
+                        <Link href={'/library' + '/' + content.slug}>{content.name}</Link>
+                      </div>}
+                    {content.type == 'task' && <div className="flex items-center gap-2">
+                        <Send className="h-5 w-5 text-[#6435c9]" />
+                        <Link href={'/tasks/' + content.slug}>{content.name}</Link>
+                      </div>}
+                  </TableCell>
+                  <TableCell>{content.description}</TableCell>
+                  <TableCell></TableCell>
+                </TableRow>;
           })}
-        </tbody>
-      </Table>
-      {/* <pre>{JSON.stringify(folder,null,2)}</pre> */}
-      {/* <pre>{JSON.stringify(contents,null,2)}</pre> */}
-    </Container>
-  </>;
+          </TableBody>
+        </Table>
+      </div>
+    </div>;
 }

package/dist/server/app/monitoring/MonitoringDashboard.js ADDED Viewed

@@ -0,0 +1,329 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { RefreshCw, Search, Play, Square, AlertCircle, CheckCircle } from 'lucide-react';
+import { getOverviewData, getTasksData, getRunsData, getLogsData } from "./action";
+import { Typography } from "../../components/ui/typography";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Badge } from "../../components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
+export default function MonitoringDashboard() {
+  const [overview, setOverview] = useState(null);
+  const [tasks, setTasks] = useState([]);
+  const [recentRuns, setRecentRuns] = useState([]);
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [filters, setFilters] = useState({
+    status: 'all',
+    task: '',
+    dateRange: '24h'
+  });
+  const fetchOverview = async () => {
+    try {
+      const data = await getOverviewData();
+      setOverview(data);
+    } catch (error) {
+      console.error('Failed to fetch overview:', error);
+    }
+  };
+  const fetchTasks = async () => {
+    try {
+      const data = await getTasksData();
+      setTasks(data);
+    } catch (error) {
+      console.error('Failed to fetch tasks:', error);
+    }
+  };
+  const DEFAULT_RUNS_LIMIT = 50;
+  const DEFAULT_LOGS_LIMIT = 100;
+  const fetchRecentRuns = async () => {
+    try {
+      const data = await getRunsData({
+        status: filters.status,
+        task: filters.task,
+        limit: DEFAULT_RUNS_LIMIT
+      });
+      setRecentRuns(data);
+    } catch (error) {
+      console.error('Failed to fetch recent runs:', error);
+    }
+  };
+  const fetchLogs = async () => {
+    try {
+      const data = await getLogsData({
+        limit: DEFAULT_LOGS_LIMIT
+      });
+      setLogs(data);
+    } catch (error) {
+      console.error('Failed to fetch logs:', error);
+    }
+  };
+  const refreshAll = async () => {
+    setLoading(true);
+    await Promise.all([fetchOverview(), fetchTasks(), fetchRecentRuns(), fetchLogs()]);
+    setLoading(false);
+  };
+  useEffect(() => {
+    refreshAll();
+  }, [filters]);
+  const REFRESH_INTERVAL = 30000; // Refresh every 30 seconds
+  useEffect(() => {
+    let interval;
+    if (autoRefresh) {
+      interval = setInterval(refreshAll, REFRESH_INTERVAL);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [autoRefresh]);
+  const getStatusVariant = status => {
+    switch (status) {
+      case 'complete':
+        return 'success';
+      case 'failed':
+        return 'destructive';
+      case 'running':
+        return 'default';
+      case 'pending':
+        return 'secondary';
+      default:
+        return 'secondary';
+    }
+  };
+  const getStatusIcon = status => {
+    switch (status) {
+      case 'complete':
+        return <CheckCircle className="h-3 w-3" />;
+      case 'failed':
+        return <AlertCircle className="h-3 w-3" />;
+      case 'running':
+        return <Play className="h-3 w-3" />;
+      case 'pending':
+        return <Square className="h-3 w-3" />;
+      default:
+        return <Square className="h-3 w-3" />;
+    }
+  };
+  const formatDuration = duration => {
+    if (!duration) return 'N/A';
+    const seconds = Math.floor(duration / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (hours > 0) return `${hours}h ${minutes % 60}m`;
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+    return `${seconds}s`;
+  };
+  const formatDate = dateString => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleString();
+  };
+  if (loading && !overview) {
+    return <div className="p-6">
+        <Typography level="h2">Loading...</Typography>
+      </div>;
+  }
+  return <div className="p-6">
+      {/* Header */}
+      <div className="mb-6 flex justify-between items-center">
+        <Typography level="h2">Task Monitoring Dashboard</Typography>
+        <div className="flex gap-2 items-center">
+          <Button variant={autoRefresh ? 'default' : 'outline'} onClick={() => setAutoRefresh(!autoRefresh)} size="sm">
+            {autoRefresh ? 'Auto-refresh ON' : 'Auto-refresh OFF'}
+          </Button>
+          <Button variant="outline" onClick={refreshAll} loading={loading} size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      {/* Overview Cards */}
+      {overview && <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <Card>
+            <CardContent className="pt-4">
+              <Typography level="title-sm" color="muted">Total Runs</Typography>
+              <Typography level="h2">{overview.totalRuns?.toLocaleString()}</Typography>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="pt-4">
+              <Typography level="title-sm" color="success">Success Rate</Typography>
+              <Typography level="h2" color="success">
+                {overview.successRate ? `${overview.successRate.toFixed(1)}%` : 'N/A'}
+              </Typography>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="pt-4">
+              <Typography level="title-sm" color="primary">Running Tasks</Typography>
+              <Typography level="h2" color="primary">{overview.runningTasks || 0}</Typography>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="pt-4">
+              <Typography level="title-sm" color="danger">Failed (24h)</Typography>
+              <Typography level="h2" color="danger">{overview.recentFailures || 0}</Typography>
+            </CardContent>
+          </Card>
+        </div>}
+      {/* Filters */}
+      <div className="mb-6 flex gap-4 items-center flex-wrap">
+        <Select value={filters.status} onValueChange={value => setFilters(prev => ({
+        ...prev,
+        status: value
+      }))}>
+          <SelectTrigger size="sm" className="w-[140px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Status</SelectItem>
+            <SelectItem value="complete">Complete</SelectItem>
+            <SelectItem value="failed">Failed</SelectItem>
+            <SelectItem value="running">Running</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input placeholder="Filter by task name..." value={filters.task} onChange={e => setFilters(prev => ({
+          ...prev,
+          task: e.target.value
+        }))} size="sm" className="pl-8 w-[200px]" />
+        </div>
+        <Select value={filters.dateRange} onValueChange={value => setFilters(prev => ({
+        ...prev,
+        dateRange: value
+      }))}>
+          <SelectTrigger size="sm" className="w-[120px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="1h">Last Hour</SelectItem>
+            <SelectItem value="24h">Last 24h</SelectItem>
+            <SelectItem value="7d">Last 7 days</SelectItem>
+            <SelectItem value="30d">Last 30 days</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      {/* Task Statistics Table */}
+      <div className="mb-8">
+        <Typography level="h3" className="mb-4">Task Statistics</Typography>
+        <div className="rounded-md border overflow-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Task Name</TableHead>
+                <TableHead>Total Runs</TableHead>
+                <TableHead>Success Rate</TableHead>
+                <TableHead>Last Run</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Avg Duration</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {tasks.map(task => <TableRow key={task.task}>
+                  <TableCell>
+                    <Typography level="body-sm" weight="medium">
+                      {task.task}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>{task.totalRuns}</TableCell>
+                  <TableCell>
+                    <Typography level="body-sm" color={task.successRate > 90 ? 'success' : task.successRate > 70 ? 'warning' : 'danger'}>
+                      {task.successRate.toFixed(1)}%
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Typography level="body-sm">
+                      {formatDate(task.lastRun)}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={getStatusVariant(task.lastStatus)} className="gap-1">
+                      {getStatusIcon(task.lastStatus)}
+                      {task.lastStatus}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Typography level="body-sm">
+                      {formatDuration(task.avgDuration)}
+                    </Typography>
+                  </TableCell>
+                </TableRow>)}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+      {/* Recent Runs */}
+      <div className="mb-8">
+        <Typography level="h3" className="mb-4">Recent Runs</Typography>
+        <div className="rounded-md border overflow-auto max-h-[400px]">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Task</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Started</TableHead>
+                <TableHead>Duration</TableHead>
+                <TableHead>Triggered By</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {recentRuns.map(run => <TableRow key={run.id}>
+                  <TableCell>
+                    <Typography level="body-sm" weight="medium">
+                      {run.task}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={getStatusVariant(run.status)} className="gap-1">
+                      {getStatusIcon(run.status)}
+                      {run.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Typography level="body-sm">
+                      {formatDate(run.started_at)}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Typography level="body-sm">
+                      {formatDuration(run.duration)}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">
+                      {run.triggered_by}
+                    </Badge>
+                  </TableCell>
+                </TableRow>)}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+      {/* Recent Logs */}
+      <div>
+        <Typography level="h3" className="mb-4">Recent Logs</Typography>
+        <div className="rounded-md border p-4 max-h-[300px] overflow-auto bg-muted/30">
+          {logs.map(log => <div key={log.id} className="mb-2 font-mono text-sm">
+              <Typography level="body-xs" color="muted">
+                [{formatDate(log.created_at)}] [{log.type}]
+              </Typography>
+              <Typography level="body-sm" className="whitespace-pre-wrap">
+                {log.content}
+              </Typography>
+            </div>)}
+        </div>
+      </div>
+    </div>;
+}

package/dist/server/app/monitoring/action.js ADDED Viewed

@@ -0,0 +1,147 @@
+'use server';
+import microlightDB from "../../database/microlight/index.js";
+export async function getOverviewData() {
+  try {
+    // Get overview statistics
+    const total_runs_result = await microlightDB.sequelize.query('SELECT COUNT(*) as count FROM runs', {
+      type: microlightDB.sequelize.QueryTypes.SELECT
+    });
+    const status_stats_result = await microlightDB.sequelize.query(`SELECT
+        status,
+        COUNT(*) as count
+      FROM runs
+      GROUP BY status`, {
+      type: microlightDB.sequelize.QueryTypes.SELECT
+    });
+    const recent_failures_result = await microlightDB.sequelize.query(`SELECT COUNT(*) as count
+      FROM runs
+      WHERE status = 'failed'
+        AND created_at >= datetime('now', '-24 hours')`, {
+      type: microlightDB.sequelize.QueryTypes.SELECT
+    });
+    const total_runs = total_runs_result[0]?.count || 0;
+    const successful_runs = status_stats_result.find(s => s.status === 'complete')?.count || 0;
+    const running_tasks = status_stats_result.find(s => s.status === 'running')?.count || 0;
+    const recent_failures = recent_failures_result[0]?.count || 0;
+    const success_rate = total_runs > 0 ? successful_runs / total_runs * 100 : 0;
+    return {
+      totalRuns: total_runs,
+      successRate: success_rate,
+      runningTasks: running_tasks,
+      recentFailures: recent_failures,
+      statusBreakdown: status_stats_result
+    };
+  } catch (error) {
+    console.error('Error fetching overview:', error);
+    throw new Error('Failed to fetch overview data');
+  }
+}
+export async function getTasksData() {
+  try {
+    // Get task statistics
+    const task_stats_result = await microlightDB.sequelize.query(`SELECT
+        task,
+        COUNT(*) as totalRuns,
+        COUNT(CASE WHEN status = 'complete' THEN 1 END) as successfulRuns,
+        COUNT(CASE WHEN status = 'failed' THEN 1 END) as failedRuns,
+        MAX(started_at) as lastRun,
+        (
+          SELECT status
+          FROM runs r2
+          WHERE r2.task = runs.task
+          ORDER BY started_at DESC
+          LIMIT 1
+        ) as lastStatus,
+        AVG(duration) as avgDuration
+      FROM runs
+      GROUP BY task
+      ORDER BY totalRuns DESC`, {
+      type: microlightDB.sequelize.QueryTypes.SELECT
+    });
+    return task_stats_result.map(task => ({
+      ...task,
+      successRate: task.totalRuns > 0 ? task.successfulRuns / task.totalRuns * 100 : 0
+    }));
+  } catch (error) {
+    console.error('Error fetching task statistics:', error);
+    throw new Error('Failed to fetch task statistics');
+  }
+}
+export async function getRunsData(filters = {}) {
+  try {
+    const {
+      status,
+      task,
+      limit = 50
+    } = filters;
+    let where_clause = '';
+    const where_conditions = [];
+    if (status && status !== 'all') {
+      where_conditions.push(`status = '${status}'`);
+    }
+    if (task && task.trim() !== '') {
+      where_conditions.push(`task LIKE '%${task}%'`);
+    }
+    if (where_conditions.length > 0) {
+      where_clause = `WHERE ${where_conditions.join(' AND ')}`;
+    }
+    const runs_result = await microlightDB.sequelize.query(`SELECT
+        id,
+        task,
+        status,
+        started_at,
+        completed_at,
+        duration,
+        triggered_by,
+        inputs
+      FROM runs
+      ${where_clause}
+      ORDER BY started_at DESC
+      LIMIT ${limit}`, {
+      type: microlightDB.sequelize.QueryTypes.SELECT
+    });
+    return runs_result;
+  } catch (error) {
+    console.error('Error fetching runs:', error);
+    throw new Error('Failed to fetch runs data');
+  }
+}
+export async function getLogsData(filters = {}) {
+  try {
+    const {
+      runId,
+      type,
+      limit = 100
+    } = filters;
+    let where_clause = '';
+    const where_conditions = [];
+    if (runId) {
+      where_conditions.push(`run = ${runId}`);
+    }
+    if (type && type !== 'all') {
+      where_conditions.push(`type = '${type}'`);
+    }
+    if (where_conditions.length > 0) {
+      where_clause = `WHERE ${where_conditions.join(' AND ')}`;
+    }
+    const logs_result = await microlightDB.sequelize.query(`SELECT
+        l.id,
+        l.created_at,
+        l.type,
+        l.content,
+        l.run,
+        r.task
+      FROM logs l
+      LEFT JOIN runs r ON l.run = r.id
+      ${where_clause}
+      ORDER BY l.created_at DESC
+      LIMIT ${limit}`, {
+      type: microlightDB.sequelize.QueryTypes.SELECT
+    });
+    return logs_result;
+  } catch (error) {
+    console.error('Error fetching logs:', error);
+    throw new Error('Failed to fetch logs data');
+  }
+}

package/dist/server/app/monitoring/page.js ADDED Viewed

@@ -0,0 +1,8 @@
+import MonitoringDashboard from "./MonitoringDashboard";
+export const metadata = {
+  title: "Monitoring - Microlight",
+  description: "Task monitoring and analytics dashboard"
+};
+export default function MonitoringPage() {
+  return <MonitoringDashboard />;
+}