@mongoosejs/studio 0.2.10 → 0.2.11

package/frontend/src/tasks/tasks.html

@@ -0,0 +1,220 @@
+<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>
+        <h1 class="text-2xl font-bold text-gray-700 mb-4">Task Overview</h1>
+        <div v-if="status == 'init'">
+            <img src="images/loader.gif" />
+        </div>
+        <!-- Task List -->
+        <div class="bg-white p-4 rounded-lg shadow" v-if="status == 'loaded'">
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Date:</label>
+                <select v-model="selectedRange" @change="updateDateRange" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                    <option v-for="option in dateFilters" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                    </option>
+                </select>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Status:</label>
+                <select v-model="selectedStatus" @change="getTasks" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                    <option v-for="option in statusFilters" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                    </option>
+                </select>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Search by Task Name:</label>
+                <input 
+                    v-model="searchQuery" 
+                    type="text" 
+                    @input="onSearchInput"
+                    class="border-gray-300 rounded-md shadow-sm w-full p-2"
+                    placeholder="Enter task name to search..."
+                >
+            </div>
+            <div class="mb-4">
+                <button
+                  @click="resetFilters"
+                  class="w-full bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition"
+                >
+                  Reset Filters
+                </button>
+            </div>
+            <div class="mb-6">
+                <button
+                  @click="openCreateTaskModal"
+                  class="w-full bg-ultramarine-600 text-white hover:bg-ultramarine-700 font-medium py-2 px-4 rounded-md transition"
+                >
+                  Create New Task
+                </button>
+            </div>
+              <!-- Summary Section -->
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                <button 
+                    @click="setStatusFilter('pending')"
+                    :class="getStatusColor('pending') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-yellow-200 hover:border-yellow-300'"
+                >
+                    <div class="text-sm">Scheduled</div>
+                    <div class="text-2xl font-bold">{{pendingCount}}</div>
+                </button>
+                <button 
+                    @click="setStatusFilter('succeeded')"
+                    :class="getStatusColor('succeeded') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-green-200 hover:border-green-300'"
+                >
+                    <div class="text-sm">Completed</div>
+                    <div class="text-2xl font-bold">{{succeededCount}}</div>
+                </button>
+                <button 
+                    @click="setStatusFilter('failed')"
+                    :class="getStatusColor('failed') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-red-200 hover:border-red-300'"
+                >
+                    <div class="text-sm">Failed</div>
+                    <div class="text-2xl font-bold">{{failedCount}}</div>
+                </button>
+                <button 
+                    @click="setStatusFilter('cancelled')"
+                    :class="getStatusColor('cancelled') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-gray-200 hover:border-gray-300'"
+                >
+                    <div class="text-sm">Cancelled</div>
+                    <div class="text-2xl font-bold">{{cancelledCount}}</div>
+                </button>
+            </div>
+            
+            <!-- Grouped Task List -->
+            <div class="mt-6">
+                <h2 class="text-lg font-semibold text-gray-700 mb-4">Tasks by Name</h2>
+                <ul class="divide-y divide-gray-200">
+                    <li v-for="group in tasksByName" :key="group.name" class="p-4 group hover:border hover:rounded-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
+                        <div class="flex items-center justify-between mb-3 ">
+                            <div class="flex-1 cursor-pointer" @click="openTaskGroupDetails(group)">
+                                <div class="flex items-center gap-2">
+                                    <div class="font-medium text-lg group-hover:text-ultramarine-600 transition-colors">{{ group.name }}</div>
+                                    <svg class="w-4 h-4 text-gray-400 group-hover:text-ultramarine-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                                    </svg>
+                                </div>
+                                <div class="text-sm text-gray-500 group-hover:text-gray-700 transition-colors">Total: {{ group.totalCount }} tasks</div>
+                                <div class="text-xs text-ultramarine-600 opacity-0 group-hover:opacity-100 transition-opacity mt-1">
+                                    Click to view details
+                                </div>
+                            </div>
+                            <div class="text-sm text-gray-500">
+                                Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
+                            </div>
+                        </div>
+                        
+                        <!-- Status Counts -->
+                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                            <button 
+                                @click.stop="openTaskGroupDetailsWithFilter(group, 'pending')"
+                                class="bg-yellow-50 border border-yellow-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-yellow-300"
+                            >
+                                <div class="text-xs text-yellow-600 font-medium">Pending</div>
+                                <div class="text-lg font-bold text-yellow-700">{{ group.statusCounts.pending || 0 }}</div>
+                            </button>
+                            <button 
+                                @click.stop="openTaskGroupDetailsWithFilter(group, 'succeeded')"
+                                class="bg-green-50 border border-green-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-green-300"
+                            >
+                                <div class="text-xs text-green-600 font-medium">Succeeded</div>
+                                <div class="text-lg font-bold text-green-700">{{ group.statusCounts.succeeded || 0 }}</div>
+                            </button>
+                            <button 
+                                @click.stop="openTaskGroupDetailsWithFilter(group, 'failed')"
+                                class="bg-red-50 border border-red-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-red-300"
+                            >
+                                <div class="text-xs text-red-600 font-medium">Failed</div>
+                                <div class="text-lg font-bold text-red-700">{{ group.statusCounts.failed || 0 }}</div>
+                            </button>
+                            <button 
+                                @click.stop="openTaskGroupDetailsWithFilter(group, 'cancelled')"
+                                class="bg-gray-50 border border-gray-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-gray-300"
+                            >
+                                <div class="text-xs text-gray-600 font-medium">Cancelled</div>
+                                <div class="text-lg font-bold text-gray-700">{{ group.statusCounts.cancelled || 0 }}</div>
+                            </button>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Create Task Modal -->
+    <modal v-if="showCreateTaskModal" containerClass="!h-[90vh] !w-[90vw]">
+        <template #body>
+            <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="closeCreateTaskModal" role="button" aria-label="Close modal">&times;</div>
+            <div class="space-y-4">
+                <h3 class="text-lg font-semibold text-gray-700 mb-4">Create New Task</h3>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Task Name:</label>
+                    <input 
+                        v-model="newTask.name" 
+                        type="text" 
+                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        placeholder="Enter task name"
+                    >
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Scheduled Time:</label>
+                    <input 
+                        v-model="newTask.scheduledAt" 
+                        type="datetime-local" 
+                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                    >
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Parameters (JSON):</label>
+                    <textarea 
+                        ref="parametersEditor"
+                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        placeholder='{"key": "value"}'
+                    ></textarea>
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Repeat Interval (ms):</label>
+                    <input 
+                        v-model="newTask.repeatInterval" 
+                        type="number" 
+                        min="0"
+                        step="1000"
+                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        placeholder="0 for no repetition"
+                    >
+                    <p class="text-xs text-gray-500 mt-1">Enter 0 or leave empty for no repetition. Use 1000 for 1 second, 60000 for 1 minute, etc.</p>
+                </div>
+                
+                <div class="flex gap-2 pt-4">
+                    <button 
+                        @click="createTask" 
+                        class="flex-1 bg-ultramarine-600 text-white px-4 py-2 rounded-md hover:bg-ultramarine-700"
+                    >
+                        Create Task
+                    </button>
+                    <button 
+                         @click="closeCreateTaskModal" 
+                         class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400"
+                     >
+                         Cancel
+                     </button>
+                </div>
+            </div>
+        </template>
+    </modal>
+</div>

package/frontend/src/tasks/tasks.js

@@ -0,0 +1,372 @@
+'use strict';
+
+const template = require('./tasks.html');
+const api = require('../api');
+
+module.exports = app => app.component('tasks', {
+  data: () => ({
+    status: 'init',
+    tasks: [],
+    groupedTasks: {},
+    selectedRange: 'today',
+    start: null,
+    end: null,
+    dateFilters: [
+      { value: 'all', label: 'All Time' },
+      { value: 'today', label: 'Today' },
+      { value: 'yesterday', label: 'Yesterday' },
+      { value: 'thisWeek', label: 'This Week' },
+      { value: 'lastWeek', label: 'Last Week' },
+      { value: 'thisMonth', label: 'This Month' },
+      { value: 'lastMonth', label: 'Last Month' }
+    ],
+    selectedStatus: 'all',
+    statusFilters: [
+      { label: 'All', value: 'all' },
+      { label: 'Pending', value: 'pending' },
+      // { label: 'In Progress', value: 'in_progress' },
+      { label: 'Succeeded', value: 'succeeded' },
+      { label: 'Failed', value: 'failed' },
+      { label: 'Cancelled', value: 'cancelled' }
+    ],
+    searchQuery: '',
+    searchTimeout: null,
+    // Task details view state
+    showTaskDetails: false,
+    selectedTaskGroup: null,
+    taskDetailsFilter: null,
+    // Create task modal state
+    showCreateTaskModal: false,
+    newTask: {
+      name: '',
+      scheduledAt: '',
+      parameters: '',
+      repeatInterval: ''
+    },
+    parametersEditor: null
+  }),
+  methods: {
+    async getTasks() {
+      const params = {};
+      if (this.selectedStatus == 'all') {
+        params.status = null;
+      } else {
+        params.status = this.selectedStatus;
+      }
+
+      if (this.start && this.end) {
+        params.start = this.start;
+        params.end = this.end;
+      } else if (this.start) {
+        params.start = this.start;
+      }
+
+      if (this.searchQuery.trim()) {
+        params.name = this.searchQuery.trim();
+      }
+
+      const { tasks, groupedTasks } = await api.Task.getTasks(params);
+      this.tasks = tasks;
+      this.groupedTasks = groupedTasks;
+    },
+    openTaskGroupDetails(group) {
+      this.selectedTaskGroup = group;
+      this.showTaskDetails = true;
+    },
+    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;
+    },
+    async onTaskCreated() {
+      // Refresh the task data when a new task is created
+      await this.getTasks();
+    },
+    formatDate(dateString) {
+      if (!dateString) return 'N/A';
+      return new Date(dateString).toLocaleString();
+    },
+    async createTask() {
+      try {
+        let parameters = {};
+        const parametersText = this.parametersEditor ? this.parametersEditor.getValue() : '';
+        if (parametersText.trim()) {
+          try {
+            parameters = JSON.parse(parametersText);
+          } catch (e) {
+            console.error('Invalid JSON in parameters field:', e);
+            this.$toast.create({
+              title: 'Invalid JSON Parameters',
+              text: 'Please check your JSON syntax in the parameters field',
+              type: 'error',
+              timeout: 5000,
+              positionClass: 'bottomRight'
+            });
+            return;
+          }
+        }
+
+        // Validate repeat interval
+        let repeatInterval = null;
+        if (this.newTask.repeatInterval && this.newTask.repeatInterval.trim()) {
+          const interval = parseInt(this.newTask.repeatInterval);
+          if (isNaN(interval) || interval < 0) {
+            console.error('Invalid repeat interval. Must be a positive number.');
+            this.$toast.create({
+              title: 'Invalid Repeat Interval',
+              text: 'Repeat interval must be a positive number (in milliseconds)',
+              type: 'error',
+              timeout: 5000,
+              positionClass: 'bottomRight'
+            });
+            return;
+          }
+          repeatInterval = interval;
+        }
+
+        const taskData = {
+          name: this.newTask.name,
+          scheduledAt: this.newTask.scheduledAt,
+          payload: parameters,
+          repeatAfterMS: repeatInterval
+        };
+
+        console.log('Creating task:', taskData);
+        await api.Task.createTask(taskData);
+
+        // Show success message
+        this.$toast.create({
+          title: 'Task Created Successfully!',
+          text: `Task "${taskData.name}" has been scheduled`,
+          type: 'success',
+          timeout: 3000,
+          positionClass: 'bottomRight'
+        });
+
+        // Close modal (which will reset form)
+        this.closeCreateTaskModal();
+
+        // Refresh the task data
+        await this.getTasks();
+      } catch (error) {
+        console.error('Error creating task:', error);
+        this.$toast.create({
+          title: 'Failed to Create Task',
+          text: error?.response?.data?.message || error.message || 'An unexpected error occurred',
+          type: 'error',
+          timeout: 5000,
+          positionClass: 'bottomRight'
+        });
+      }
+    },
+    resetCreateTaskForm() {
+      this.newTask = {
+        name: '',
+        scheduledAt: '',
+        parameters: '',
+        repeatInterval: ''
+      };
+      if (this.parametersEditor) {
+        this.parametersEditor.setValue('');
+      }
+    },
+    setDefaultCreateTaskValues() {
+      // Set default scheduled time to 1 hour from now
+      const defaultTime = new Date();
+      defaultTime.setHours(defaultTime.getHours() + 1);
+      this.newTask.scheduledAt = defaultTime.toISOString().slice(0, 16);
+    },
+    closeCreateTaskModal() {
+      this.showCreateTaskModal = false;
+      this.resetCreateTaskForm();
+      this.setDefaultCreateTaskValues();
+    },
+    initializeParametersEditor() {
+      if (this.$refs.parametersEditor && !this.parametersEditor) {
+        this.parametersEditor = CodeMirror.fromTextArea(this.$refs.parametersEditor, {
+          mode: 'javascript',
+          lineNumbers: true,
+          smartIndent: false,
+          theme: 'default'
+        });
+      }
+    },
+    openCreateTaskModal() {
+      this.showCreateTaskModal = true;
+      this.$nextTick(() => {
+        this.initializeParametersEditor();
+      });
+    },
+    getStatusColor(status) {
+      if (status === 'succeeded') {
+        // Green (success)
+        return 'bg-green-100 text-green-800';
+      } else if (status === 'pending') {
+        // Yellow (waiting)
+        return 'bg-yellow-100 text-yellow-800';
+      } else if (status === 'cancelled') {
+        // Gray (neutral/aborted)
+        return 'bg-gray-100 text-gray-800';
+      } else if (status === 'failed') {
+        // Red (error)
+        return 'bg-red-100 text-red-800';
+      } else if (status === 'in_progress') {
+        // Blue (active/running)
+        return 'bg-blue-100 text-blue-800';
+      } else {
+        // Default (fallback)
+        return 'bg-slate-100 text-slate-800';
+      }
+    },
+    async resetFilters() {
+      this.selectedStatus = 'all';
+      this.selectedRange = 'today';
+      this.searchQuery = '';
+      await this.updateDateRange();
+    },
+    async setStatusFilter(status) {
+      this.selectedStatus = status;
+      await this.getTasks();
+    },
+    async onSearchInput() {
+      // Debounce the search to avoid too many API calls
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = setTimeout(async() => {
+        await this.getTasks();
+      }, 300);
+    },
+    async updateDateRange() {
+      const now = new Date();
+      let start, end;
+
+      switch (this.selectedRange) {
+        case 'today':
+          start = new Date();
+          start.setHours(0, 0, 0, 0);
+          end = new Date();
+          end.setHours(23, 59, 59, 999);
+          break;
+        case 'yesterday':
+          start = new Date();
+          start.setDate(start.getDate() - 1);
+          start.setHours(0, 0, 0, 0);
+          end = new Date();
+          break;
+        case 'thisWeek':
+          start = new Date(now.getTime() - (7 * 86400000));
+          start.setHours(0, 0, 0, 0);
+          end = new Date();
+          end.setHours(23, 59, 59, 999);
+          break;
+        case 'lastWeek':
+          start = new Date(now.getTime() - (14 * 86400000));
+          start.setHours(0, 0, 0, 0);
+          end = new Date(now.getTime() - (7 * 86400000));
+          end.setHours(23, 59, 59, 999);
+          break;
+        case 'thisMonth':
+          start = new Date(now.getFullYear(), now.getMonth(), 1);
+          end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
+          break;
+        case 'lastMonth':
+          start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+          end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
+          break;
+        case 'all':
+        default:
+          this.start = null;
+          this.end = null;
+          break;
+      }
+
+      this.start = start;
+      this.end = end;
+
+      await this.getTasks();
+    }
+  },
+  computed: {
+    tasksByName() {
+      const groups = {};
+
+      // Process tasks from groupedTasks to create name-based groups
+      Object.entries(this.groupedTasks).forEach(([status, tasks]) => {
+        tasks.forEach(task => {
+          if (!groups[task.name]) {
+            groups[task.name] = {
+              name: task.name,
+              tasks: [],
+              statusCounts: {
+                pending: 0,
+                succeeded: 0,
+                failed: 0,
+                cancelled: 0
+              },
+              totalCount: 0,
+              lastRun: null
+            };
+          }
+
+          groups[task.name].tasks.push(task);
+          groups[task.name].totalCount++;
+
+          // Count status using the status from groupedTasks
+          if (groups[task.name].statusCounts.hasOwnProperty(status)) {
+            groups[task.name].statusCounts[status]++;
+          }
+
+          // Track last run time
+          const taskTime = new Date(task.scheduledAt || task.createdAt || 0);
+          if (!groups[task.name].lastRun || taskTime > new Date(groups[task.name].lastRun)) {
+            groups[task.name].lastRun = taskTime;
+          }
+        });
+      });
+
+      // Convert to array and sort alphabetically by name
+      return Object.values(groups).sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      });
+    },
+    succeededCount() {
+      return this.groupedTasks.succeeded ? this.groupedTasks.succeeded.length : 0;
+    },
+    failedCount() {
+      return this.groupedTasks.failed ? this.groupedTasks.failed.length : 0;
+    },
+    cancelledCount() {
+      return this.groupedTasks.cancelled ? this.groupedTasks.cancelled.length : 0;
+    },
+    pendingCount() {
+      return this.groupedTasks.pending ? this.groupedTasks.pending.length : 0;
+    }
+  },
+  mounted: async function() {
+    await this.updateDateRange();
+    await this.getTasks();
+    this.status = 'loaded';
+    this.setDefaultCreateTaskValues();
+  },
+  beforeDestroy() {
+    if (this.parametersEditor) {
+      this.parametersEditor.toTextArea();
+    }
+  },
+
+  template: template
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "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": {
@@ -28,6 +28,9 @@
   "peerDependencies": {
     "mongoose": "7.x || 8.x || ^9.0.0"
   },
+  "optionalPeerDependencies": {
+    "@mongoosejs/task": "0.5.x || 0.6.x"
+  },
   "devDependencies": {
     "@masteringjs/eslint-config": "0.1.1",
     "axios": "1.2.2",