@mongoosejs/studio 0.2.12 → 0.3.0

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

@@ -1,77 +1,128 @@
 <div class="p-4 space-y-6">
     <div class="flex items-center justify-between">
         <div>
-            <button @click="$emit('back')" class="text-gray-500 hover:text-gray-700 mb-2">
+            <button @click="goBack" class="text-content-tertiary hover:text-content-secondary mb-2">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                 </svg>
-                Back to Task Groups
+                {{ backLabel }}
             </button>
-            <h1 class="text-2xl font-bold text-gray-700">{{ taskGroup.name }}</h1>
-            <p class="text-gray-500">Total: {{ taskGroup.totalCount }} tasks</p>
+            <h1 class="text-2xl font-bold text-content-secondary">{{ taskGroup.name }}</h1>
+            <p class="text-content-tertiary">Total: {{ taskGroup.totalCount }} tasks</p>
         </div>
 
       </div>
 
         <!-- Status Summary -->
-       <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
-         <button 
-           @click="filterByStatus('pending')"
-           class="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-center hover:bg-yellow-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-yellow-400': currentFilter === 'pending' }"
-         >
-           <div class="text-xs text-yellow-600 font-medium">Pending</div>
-           <div class="text-lg font-bold text-yellow-700">{{ taskGroup.statusCounts.pending || 0 }}</div>
-         </button>
-         <button 
-           @click="filterByStatus('succeeded')"
-           class="bg-green-50 border border-green-200 rounded-md p-3 text-center hover:bg-green-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-green-400': currentFilter === 'succeeded' }"
-         >
-           <div class="text-xs text-green-600 font-medium">Succeeded</div>
-           <div class="text-lg font-bold text-green-700">{{ taskGroup.statusCounts.succeeded || 0 }}</div>
-         </button>
-         <button 
-           @click="filterByStatus('failed')"
-           class="bg-red-50 border border-red-200 rounded-md p-3 text-center hover:bg-red-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-red-400': currentFilter === 'failed' }"
-         >
-           <div class="text-xs text-red-600 font-medium">Failed</div>
-           <div class="text-lg font-bold text-red-700">{{ taskGroup.statusCounts.failed || 0 }}</div>
-         </button>
-         <button 
-           @click="filterByStatus('cancelled')"
-           class="bg-gray-50 border border-gray-200 rounded-md p-3 text-center hover:bg-gray-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-gray-400': currentFilter === 'cancelled' }"
-         >
-           <div class="text-xs text-gray-600 font-medium">Cancelled</div>
-           <div class="text-lg font-bold text-gray-700">{{ taskGroup.statusCounts.cancelled || 0 }}</div>
-         </button>
-       </div>
-
-        <!-- Task List -->
-       <div class="bg-white rounded-lg shadow">
-         <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-           <h2 class="text-lg font-semibold text-gray-700">
-             Individual Tasks
-             <span v-if="currentFilter" class="text-sm font-normal text-gray-500 ml-2">
-               (Filtered by {{ currentFilter }})
-             </span>
-           </h2>
+       <div class="space-y-3">
+         <div class="flex items-center justify-between">
+           <span class="text-sm font-medium text-content-secondary">Status</span>
+           <div class="flex rounded-md shadow-sm" role="group">
+             <button
+               type="button"
+               @click="statusView = 'summary'"
+               class="px-3 py-1.5 text-sm font-medium rounded-l-md border transition-colors"
+               :class="statusView === 'summary' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'"
+             >
+               Summary
+             </button>
+             <button
+               type="button"
+               @click="statusView = 'chart'"
+               class="px-3 py-1.5 text-sm font-medium rounded-r-md border border-l-0 transition-colors"
+               :class="statusView === 'chart' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'"
+             >
+               Chart
+             </button>
+           </div>
+         </div>
+         <!-- Summary view -->
+         <div v-show="statusView === 'summary'" class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+           <button 
+             @click="filterByStatus('pending')"
+             class="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-center hover:bg-yellow-100 transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-yellow-400': currentFilter === 'pending' }"
+           >
+             <div class="text-xs text-yellow-600 font-medium">Pending</div>
+             <div class="text-lg font-bold text-yellow-700">{{ taskGroup.statusCounts.pending || 0 }}</div>
+           </button>
+           <button 
+             @click="filterByStatus('succeeded')"
+             class="bg-green-50 border border-green-200 rounded-md p-3 text-center hover:bg-green-100 transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-green-400': currentFilter === 'succeeded' }"
+           >
+             <div class="text-xs text-green-600 font-medium">Succeeded</div>
+             <div class="text-lg font-bold text-green-700">{{ taskGroup.statusCounts.succeeded || 0 }}</div>
+           </button>
            <button 
-             v-if="currentFilter"
-             @click="clearFilter"
-             class="text-sm text-ultramarine-600 hover:text-ultramarine-700 font-medium"
+             @click="filterByStatus('failed')"
+             class="bg-red-50 border border-red-200 rounded-md p-3 text-center hover:bg-red-100 transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-red-400': currentFilter === 'failed' }"
            >
-             Show All
+             <div class="text-xs text-red-600 font-medium">Failed</div>
+             <div class="text-lg font-bold text-red-700">{{ taskGroup.statusCounts.failed || 0 }}</div>
+           </button>
+           <button 
+             @click="filterByStatus('cancelled')"
+             class="bg-page border border-edge rounded-md p-3 text-center hover:bg-muted transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-gray-400': currentFilter === 'cancelled' }"
+           >
+             <div class="text-xs text-gray-600 font-medium">Cancelled</div>
+             <div class="text-lg font-bold text-content-secondary">{{ taskGroup.statusCounts.cancelled || 0 }}</div>
            </button>
          </div>
+         <!-- Chart view -->
+         <div v-show="statusView === 'chart'" class="flex flex-col items-center justify-center bg-surface border border-edge rounded-lg p-4 gap-3" style="min-height: 280px;">
+           <div v-if="taskGroup.totalCount > 0" class="w-[240px] h-[240px] shrink-0">
+             <canvas ref="statusPieChart" width="240" height="240" class="block"></canvas>
+           </div>
+           <p v-else class="text-content-tertiary text-sm py-8">No tasks to display</p>
+           <!-- Selection labels: show which segment is selected (click to filter) -->
+           <div v-if="taskGroup.totalCount > 0" class="flex flex-wrap justify-center gap-2">
+             <button
+               v-for="status in statusOrderForDisplay"
+               :key="status"
+               type="button"
+               class="text-xs px-2 py-1 rounded-full font-medium transition-all cursor-pointer"
+               :class="currentFilter === status ? getStatusPillClass(status) : 'bg-muted text-content-tertiary hover:bg-muted'"
+               @click="filterByStatus(status)"
+             >
+               {{ statusLabel(status) }}
+             </button>
+           </div>
+         </div>
+       </div>
+
+        <!-- Task List -->
+       <div class="bg-surface rounded-lg shadow">
+        <div class="px-6 py-6 border-b border-edge flex items-center justify-between bg-page">
+          <h2 class="text-xl font-bold text-content">
+            Individual Tasks
+            <span v-if="currentFilter" class="ml-3 text-base font-semibold text-primary">
+              (Filtered by {{ currentFilter }})
+            </span>
+          </h2>
+          <button 
+            v-if="currentFilter"
+            @click="clearFilter"
+            class="text-sm font-semibold text-primary hover:text-primary"
+          >
+            Show All
+          </button>
+        </div>
         <div class="divide-y divide-gray-200">
           <div v-for="task in sortedTasks" :key="task.id" class="p-6">
             <div class="flex items-start justify-between">
               <div class="flex-1">
                 <div class="flex items-center gap-3 mb-2">
-                  <span class="text-sm font-medium text-gray-900">Task ID: {{ task.id }}</span>
+                  <span class="text-sm font-medium text-content">Task ID: {{ task.id }}</span>
+                  <router-link
+                    v-if="backTo"
+                    :to="taskDetailRoute(task)"
+                    class="text-sm text-primary hover:text-primary font-medium"
+                  >
+                    View details
+                  </router-link>
                   <span
                     class="text-xs px-2 py-1 rounded-full font-medium"
                     :class="getStatusColor(task.status)"
@@ -82,27 +133,27 @@
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                   <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Scheduled At</label>
-                    <div class="text-sm text-gray-900">{{ formatDate(task.scheduledAt) }}</div>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Scheduled At</label>
+                    <div class="text-sm text-content">{{ formatDate(task.scheduledAt) }}</div>
                   </div>
                   <div v-if="task.startedAt">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Started At</label>
-                    <div class="text-sm text-gray-900">{{ formatDate(task.startedAt) }}</div>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Started At</label>
+                    <div class="text-sm text-content">{{ formatDate(task.startedAt) }}</div>
                   </div>
                   <div v-if="task.completedAt">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Completed At</label>
-                    <div class="text-sm text-gray-900">{{ formatDate(task.completedAt) }}</div>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Completed At</label>
+                    <div class="text-sm text-content">{{ formatDate(task.completedAt) }}</div>
                   </div>
                   <div v-if="task.error">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Error</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Error</label>
                     <div class="text-sm text-red-600">{{ task.error }}</div>
                   </div>
                 </div>
 
                 <!-- Task Parameters -->
                 <div v-if="task.parameters && Object.keys(task.parameters).length > 0">
-                  <label class="block text-sm font-medium text-gray-700 mb-2">Parameters</label>
-                  <div class="bg-gray-50 rounded-md p-3">
+                  <label class="block text-sm font-medium text-content-secondary mb-2">Parameters</label>
+                  <div class="bg-page rounded-md p-3">
                     <pre class="text-sm text-gray-800 whitespace-pre-wrap">{{ JSON.stringify(task.parameters, null, 2) }}</pre>
                   </div>
                 </div>
@@ -157,26 +208,26 @@
                         </svg>
                     </div>
                     <div class="ml-3">
-                        <h3 class="text-lg font-medium text-gray-900">Reschedule Task</h3>
+                        <h3 class="text-lg font-medium text-content">Reschedule Task</h3>
                     </div>
                 </div>
                 <div class="mb-4">
                     <p class="text-sm text-gray-600">
                         Are you sure you want to reschedule task <strong>{{ selectedTask?.id }}</strong>?
                     </p>
-                    <p class="text-sm text-gray-500 mt-2">
+                    <p class="text-sm text-content-tertiary mt-2">
                         This will reset the task's status and schedule it to run again.
                     </p>
                     
                     <div class="mt-4">
-                        <label for="newScheduledTime" class="block text-sm font-medium text-gray-700 mb-2">
+                        <label for="newScheduledTime" class="block text-sm font-medium text-content-secondary mb-2">
                             New Scheduled Time
                         </label>
                         <input
                             id="newScheduledTime"
                             v-model="newScheduledTime"
                             type="datetime-local"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                            class="w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                             required
                         />
                     </div>
@@ -190,7 +241,7 @@
                     </button>
                     <button 
                         @click="showRescheduleModal = false"
-                        class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
+                        class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
                     >
                         Cancel
                     </button>
@@ -211,14 +262,14 @@
                         </svg>
                     </div>
                     <div class="ml-3">
-                        <h3 class="text-lg font-medium text-gray-900">Run Task Now</h3>
+                        <h3 class="text-lg font-medium text-content">Run Task Now</h3>
                     </div>
                 </div>
                 <div class="mb-4">
                     <p class="text-sm text-gray-600">
                         Are you sure you want to run task <strong>{{ selectedTask?.id }}</strong> immediately?
                     </p>
-                    <p class="text-sm text-gray-500 mt-2">
+                    <p class="text-sm text-content-tertiary mt-2">
                         This will execute the task right away, bypassing its scheduled time.
                     </p>
                 </div>
@@ -231,7 +282,7 @@
                     </button>
                     <button 
                         @click="showRunModal = false"
-                        class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
+                        class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
                     >
                         Cancel
                     </button>
@@ -252,14 +303,14 @@
                         </svg>
                     </div>
                     <div class="ml-3">
-                        <h3 class="text-lg font-medium text-gray-900">Cancel Task</h3>
+                        <h3 class="text-lg font-medium text-content">Cancel Task</h3>
                     </div>
                 </div>
                 <div class="mb-4">
                     <p class="text-sm text-gray-600">
                         Are you sure you want to cancel task <strong>{{ selectedTask?.id }}</strong>?
                     </p>
-                    <p class="text-sm text-gray-500 mt-2">
+                    <p class="text-sm text-content-tertiary mt-2">
                         This will permanently cancel the task and it cannot be undone.
                     </p>
                 </div>
@@ -272,7 +323,7 @@
                     </button>
                     <button 
                         @click="showCancelModal = false"
-                        class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
+                        class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
                     >
                         Keep Task
                     </button>

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,128 @@ 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 {
+        const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+        const legendColor = isDark
+          ? (getComputedStyle(document.documentElement).getPropertyValue('--studio-text-primary')?.trim() || 'rgba(255,255,255,0.9)')
+          : undefined;
+        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',
+                ...(legendColor && { labels: { color: legendColor } })
+              }
+            }
+          }
+        });
+      } 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 +198,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 +326,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
 });