@mongoosejs/studio 0.2.12 → 0.2.13

package/frontend/src/tasks/task-details/task-details.js

@@ -3,16 +3,30 @@
 const template = require('./task-details.html');
 const api = require('../../api');
 
+const STATUS_ORDER = ['pending', 'succeeded', 'failed', 'cancelled'];
+const PIE_COLORS = ['#eab308', '#22c55e', '#ef4444', '#6b7280'];
+const PIE_HOVER = ['#ca8a04', '#16a34a', '#dc2626', '#4b5563'];
+
 module.exports = app => app.component('task-details', {
-  props: ['taskGroup', 'currentFilter'],
+  props: {
+    taskGroup: { type: Object, required: true },
+    backTo: { type: Object, default: null }
+  },
   data: () => ({
+    currentFilter: null,
     showRescheduleModal: false,
     showRunModal: false,
     showCancelModal: false,
     selectedTask: null,
-    newScheduledTime: ''
+    newScheduledTime: '',
+    statusView: 'summary',
+    statusChart: null
   }),
   computed: {
+    backLabel() {
+      if (this.backTo?.path?.startsWith('/tasks/') || this.backTo?.name === 'taskByName') return `Back to ${this.taskGroup?.name || 'tasks'}`;
+      return 'Back to Task Groups';
+    },
     sortedTasks() {
       let tasks = this.taskGroup.tasks;
 
@@ -26,9 +40,123 @@ module.exports = app => app.component('task-details', {
         const dateB = new Date(b.scheduledAt || b.createdAt || 0);
         return dateB - dateA; // Most recent first
       });
+    },
+    pieChartData() {
+      const counts = this.taskGroup?.statusCounts || {};
+      return {
+        labels: ['Pending', 'Succeeded', 'Failed', 'Cancelled'],
+        datasets: [{
+          data: STATUS_ORDER.map(s => counts[s] || 0),
+          backgroundColor: PIE_COLORS,
+          hoverBackgroundColor: PIE_HOVER,
+          borderWidth: 2,
+          borderColor: '#fff'
+        }]
+      };
+    },
+    statusOrderForDisplay() {
+      return STATUS_ORDER;
     }
   },
+  watch: {
+    '$route.query.status': {
+      handler(status) {
+        this.currentFilter = status || null;
+      },
+      immediate: true
+    },
+    statusView(val) {
+      if (val !== 'chart') this.destroyStatusChart();
+      else {
+        this.$nextTick(() => {
+          requestAnimationFrame(() => this.ensureStatusChart());
+        });
+      }
+    },
+    taskGroup: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          requestAnimationFrame(() => this.ensureStatusChart());
+        });
+      }
+    },
+  },
   methods: {
+    destroyStatusChart() {
+      if (this.statusChart) {
+        try {
+          this.statusChart.destroy();
+        } catch (_) {
+          // ignore Chart.js teardown errors
+        }
+        this.statusChart = null;
+      }
+    },
+    isChartCanvasReady(canvas) {
+      return canvas && typeof canvas.getContext === 'function' && canvas.isConnected && canvas.offsetParent != null;
+    },
+    ensureStatusChart() {
+      if (this.statusView !== 'chart' || !this.taskGroup || this.taskGroup.totalCount === 0) {
+        this.destroyStatusChart();
+        return;
+      }
+      const canvas = this.$refs.statusPieChart;
+      if (!canvas || !this.isChartCanvasReady(canvas)) return;
+      const Chart = typeof window !== 'undefined' && window.Chart;
+      if (!Chart) return;
+      const data = this.pieChartData;
+      if (this.statusChart) {
+        try {
+          this.statusChart.data.labels = data.labels;
+          this.statusChart.data.datasets[0].data = data.datasets[0].data;
+          this.statusChart.update('none');
+        } catch (_) {
+          this.destroyStatusChart();
+        }
+        return;
+      }
+      try {
+        this.statusChart = new Chart(canvas, {
+          type: 'doughnut',
+          data,
+          options: {
+            responsive: false,
+            maintainAspectRatio: false,
+            animation: false,
+            layout: {
+              padding: 8
+            },
+            onClick: (_evt, elements) => {
+              if (elements && elements.length > 0) {
+                const status = STATUS_ORDER[elements[0].index];
+                this.$nextTick(() => this.filterByStatus(status));
+              }
+            },
+            plugins: {
+              legend: {
+                display: true,
+                position: 'bottom'
+              }
+            }
+          }
+        });
+      } catch (_) {
+        this.statusChart = null;
+      }
+    },
+    statusLabel(status) {
+      return status.charAt(0).toUpperCase() + status.slice(1).replace('_', ' ');
+    },
+    getStatusPillClass(status) {
+      const classes = {
+        pending: 'bg-yellow-200 text-yellow-900 ring-2 ring-yellow-500',
+        succeeded: 'bg-green-200 text-green-900 ring-2 ring-green-500',
+        failed: 'bg-red-200 text-red-900 ring-2 ring-red-500',
+        cancelled: 'bg-gray-200 text-gray-900 ring-2 ring-gray-500'
+      };
+      return classes[status] || 'bg-slate-200 text-slate-900 ring-2 ring-slate-500';
+    },
     getStatusColor(status) {
       if (status === 'succeeded') {
         return 'bg-green-100 text-green-800';
@@ -65,15 +193,35 @@ module.exports = app => app.component('task-details', {
       this.$emit('task-cancelled');
     },
     filterByStatus(status) {
-      // If clicking the same status, clear the filter
-      if (this.currentFilter === status) {
-        this.$emit('update:currentFilter', null);
+      const next = this.currentFilter === status ? null : status;
+      this.currentFilter = next;
+      const query = { ...this.$route.query };
+      if (next) query.status = next;
+      else delete query.status;
+      this.$router.replace({ path: this.$route.path, query });
+    },
+    clearFilter() {
+      this.currentFilter = null;
+      const query = { ...this.$route.query };
+      delete query.status;
+      this.$router.replace({ path: this.$route.path, query });
+    },
+    goBack() {
+      if (this.backTo) {
+        if (window.history.length > 1) {
+          window.history.back();
+        } else {
+          this.$router.push(this.backTo);
+        }
       } else {
-        this.$emit('update:currentFilter', status);
+        this.$emit('back');
       }
     },
-    clearFilter() {
-      this.$emit('update:currentFilter', null);
+    taskDetailRoute(task) {
+      const id = String(task.id || task._id);
+      const path = `/tasks/${encodeURIComponent(this.taskGroup.name || '')}/${id}`;
+      const query = this.currentFilter ? { status: this.currentFilter } : {};
+      return { path, query };
     },
     showRescheduleConfirmation(task) {
       this.selectedTask = task;
@@ -173,10 +321,13 @@ module.exports = app => app.component('task-details', {
 
   },
   mounted() {
-    // Check if the task group was already filtered when passed from parent
     if (this.taskGroup.filteredStatus && !this.currentFilter) {
-      this.$emit('update:currentFilter', this.taskGroup.filteredStatus);
+      this.currentFilter = this.taskGroup.filteredStatus;
+      this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, status: this.taskGroup.filteredStatus } });
     }
   },
+  beforeUnmount() {
+    this.destroyStatusChart();
+  },
   template: template
 });

package/frontend/src/tasks/tasks.html

@@ -1,17 +1,5 @@
 <div class="p-4 space-y-6">
-         <!-- Task Details View -->
-     <task-details 
-         v-if="showTaskDetails && selectedTaskGroup"
-         :task-group="selectedTaskGroup"
-         :current-filter="taskDetailsFilter"
-         @back="hideTaskDetails"
-         @task-created="onTaskCreated"
-         @task-cancelled="onTaskCancelled"
-         @update:current-filter="taskDetailsFilter = $event"
-     ></task-details>
-
-    <!-- Main Tasks View -->
-    <div v-else>
+    <div>
         <h1 class="text-2xl font-bold text-gray-700 mb-4">Task Overview</h1>
         <div v-if="status == 'init'">
             <img src="images/loader.gif" />

package/frontend/src/tasks/tasks.js

@@ -8,11 +8,12 @@ module.exports = app => app.component('tasks', {
     status: 'init',
     tasks: [],
     groupedTasks: {},
-    selectedRange: 'today',
+    selectedRange: 'last_hour',
     start: null,
     end: null,
     dateFilters: [
       { value: 'all', label: 'All Time' },
+      { value: 'last_hour', label: 'Last Hour' },
       { value: 'today', label: 'Today' },
       { value: 'yesterday', label: 'Yesterday' },
       { value: 'thisWeek', label: 'This Week' },
@@ -31,10 +32,6 @@ module.exports = app => app.component('tasks', {
     ],
     searchQuery: '',
     searchTimeout: null,
-    // Task details view state
-    showTaskDetails: false,
-    selectedTaskGroup: null,
-    taskDetailsFilter: null,
     // Create task modal state
     showCreateTaskModal: false,
     newTask: {
@@ -70,28 +67,10 @@ module.exports = app => app.component('tasks', {
       this.groupedTasks = groupedTasks;
     },
     openTaskGroupDetails(group) {
-      this.selectedTaskGroup = group;
-      this.showTaskDetails = true;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}` });
     },
     openTaskGroupDetailsWithFilter(group, status) {
-      // Create a filtered version of the task group with only the specified status
-      const filteredGroup = {
-        ...group,
-        tasks: group.tasks.filter(task => task.status === status),
-        filteredStatus: status
-      };
-      this.selectedTaskGroup = filteredGroup;
-      this.taskDetailsFilter = status;
-      this.showTaskDetails = true;
-    },
-    async onTaskCancelled() {
-      // Refresh the task data when a task is cancelled
-      await this.getTasks();
-    },
-    hideTaskDetails() {
-      this.showTaskDetails = false;
-      this.selectedTaskGroup = null;
-      this.taskDetailsFilter = null;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query: status ? { status } : {} });
     },
     async onTaskCreated() {
       // Refresh the task data when a new task is created
@@ -255,6 +234,11 @@ module.exports = app => app.component('tasks', {
       let start, end;
 
       switch (this.selectedRange) {
+        case 'last_hour':
+          start = new Date();
+          start.setHours(start.getHours() - 1);
+          end = new Date();
+          break;
         case 'today':
           start = new Date();
           start.setHours(0, 0, 0, 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -38,6 +38,7 @@
     "eslint": "9.30.0",
     "express": "4.x",
     "mocha": "10.2.0",
+    "mongodb-memory-server": "^11.0.1",
     "mongoose": "9.x",
     "sinon": "^21.0.1"
   },