@mongoosejs/studio 0.3.0 → 0.3.2

package/frontend/src/task-by-name/task-by-name.js

@@ -3,6 +3,7 @@
 // Page: all tasks with a given name. Reuses task-details to render the list (many tasks).
 const template = require('./task-by-name.html');
 const api = require('../api');
+const { DATE_FILTERS, DATE_FILTER_VALUES, getDateRangeForRange } = require('../_util/dateRange');
 
 function buildTaskGroup(name, tasks) {
   const statusCounts = { pending: 0, succeeded: 0, failed: 0, cancelled: 0, in_progress: 0, unknown: 0 };
@@ -26,44 +27,118 @@ function buildTaskGroup(name, tasks) {
   };
 }
 
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+
 module.exports = app => app.component('task-by-name', {
   template,
   data: () => ({
     status: 'init',
     taskGroup: null,
-    errorMessage: ''
+    errorMessage: '',
+    selectedRange: 'last_hour',
+    start: null,
+    end: null,
+    dateFilters: DATE_FILTERS,
+    page: 1,
+    pageSize: 50,
+    numDocs: 0,
+    pageSizeOptions: PAGE_SIZE_OPTIONS,
+    _loadId: 0,
+    _lastQueryFilters: null
   }),
   computed: {
     taskName() {
       return this.$route.params.name || '';
     }
   },
+  created() {
+    const fromQuery = this.$route.query.dateRange;
+    this.selectedRange = (fromQuery && DATE_FILTER_VALUES.includes(fromQuery)) ? fromQuery : 'last_hour';
+    if (!this.$route.query.dateRange) {
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, dateRange: this.selectedRange }
+      });
+    }
+  },
   watch: {
     taskName: {
       immediate: true,
       handler() {
+        this.page = 1;
         this.loadTasks();
       }
+    },
+    '$route.query': {
+      handler(query) {
+        const dateRange = query.dateRange;
+        if (dateRange && DATE_FILTER_VALUES.includes(dateRange) && this.selectedRange !== dateRange) {
+          this.selectedRange = dateRange;
+        }
+        const effectiveDateRange = (dateRange && DATE_FILTER_VALUES.includes(dateRange)) ? dateRange : (this.selectedRange || 'last_hour');
+        const effectiveStatus = query.status ?? '';
+        const key = `${effectiveDateRange}|${effectiveStatus}`;
+        if (this._lastQueryFilters === key) return;
+        this.page = 1;
+        this.loadTasks();
+      },
+      deep: true
     }
   },
   methods: {
+    updateDateRange() {
+      this.page = 1;
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, dateRange: this.selectedRange }
+      });
+    },
+    goToPage(page) {
+      const maxPage = Math.max(1, Math.ceil(this.numDocs / this.pageSize));
+      const next = Math.max(1, Math.min(page, maxPage));
+      if (next === this.page) return;
+      this.page = next;
+      this.loadTasks();
+    },
+    onPageSizeChange() {
+      this.page = 1;
+      this.loadTasks();
+    },
     async loadTasks() {
       if (!this.taskName) return;
+      const loadId = ++this._loadId;
       this.status = 'init';
       this.taskGroup = null;
       this.errorMessage = '';
-      const start = new Date();
-      start.setHours(start.getHours() - 1);
-      const end = new Date();
+      const dateRangeFromQuery = this.$route.query.dateRange;
+      const dateRange = (dateRangeFromQuery && DATE_FILTER_VALUES.includes(dateRangeFromQuery))
+        ? dateRangeFromQuery
+        : (this.selectedRange || 'last_hour');
+      this.selectedRange = dateRange;
+      const { start, end } = getDateRangeForRange(dateRange);
+      this.start = start;
+      this.end = end;
+      const skip = (this.page - 1) * this.pageSize;
+      const params = {
+        name: this.taskName,
+        start: start instanceof Date ? start.toISOString() : start,
+        end: end instanceof Date ? end.toISOString() : end,
+        skip,
+        limit: this.pageSize
+      };
+      const statusFromQuery = this.$route.query.status;
+      if (statusFromQuery) params.status = statusFromQuery;
+      this._lastQueryFilters = `${dateRange}|${statusFromQuery ?? ''}`;
       try {
-        const { tasks } = await api.Task.getTasks({
-          name: this.taskName,
-          start,
-          end
-        });
+        const { tasks, numDocs, statusCounts } = await api.Task.getTasks(params);
+        if (loadId !== this._loadId) return;
+        this.numDocs = numDocs ?? tasks.length;
         this.taskGroup = buildTaskGroup(this.taskName, tasks);
+        this.taskGroup.totalCount = this.numDocs;
+        if (statusCounts) this.taskGroup.statusCounts = statusCounts;
         this.status = 'loaded';
       } catch (err) {
+        if (loadId !== this._loadId) return;
         this.status = 'error';
         this.errorMessage = err?.response?.data?.message || err.message || 'Failed to load tasks';
       }

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

@@ -1,14 +1,14 @@
 <div class="p-4 space-y-6">
     <div class="flex items-center justify-between">
         <div>
-            <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>
-                {{ backLabel }}
-            </button>
-            <h1 class="text-2xl font-bold text-content-secondary">{{ taskGroup.name }}</h1>
-            <p class="text-content-tertiary">Total: {{ taskGroup.totalCount }} tasks</p>
+          <button v-if="showBackButton" @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>
+            {{ backLabel }}
+          </button>
+          <h1 class="text-2xl font-bold text-content-secondary">{{ taskGroup.name }}</h1>
+          <p class="text-content-tertiary">Total: {{ taskGroup.totalCount }} tasks</p>
         </div>
 
       </div>

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

@@ -10,7 +10,8 @@ const PIE_HOVER = ['#ca8a04', '#16a34a', '#dc2626', '#4b5563'];
 module.exports = app => app.component('task-details', {
   props: {
     taskGroup: { type: Object, required: true },
-    backTo: { type: Object, default: null }
+    backTo: { type: Object, default: null },
+    showBackButton: { type: Boolean, default: true }
   },
   data: () => ({
     currentFilter: null,

package/frontend/src/tasks/tasks.js

@@ -2,25 +2,17 @@
 
 const template = require('./tasks.html');
 const api = require('../api');
+const { DATE_FILTERS, getDateRangeForRange } = require('../_util/dateRange');
 
 module.exports = app => app.component('tasks', {
   data: () => ({
     status: 'init',
-    tasks: [],
-    groupedTasks: {},
+    statusCounts: { pending: 0, succeeded: 0, failed: 0, cancelled: 0 },
+    tasksByName: [],
     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' },
-      { value: 'lastWeek', label: 'Last Week' },
-      { value: 'thisMonth', label: 'This Month' },
-      { value: 'lastMonth', label: 'Last Month' }
-    ],
+    dateFilters: DATE_FILTERS,
     selectedStatus: 'all',
     statusFilters: [
       { label: 'All', value: 'all' },
@@ -50,26 +42,31 @@ module.exports = app => app.component('tasks', {
         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.start != null && this.end != null) {
+        params.start = this.start instanceof Date ? this.start.toISOString() : this.start;
+        params.end = this.end instanceof Date ? this.end.toISOString() : this.end;
+      } else if (this.start != null) {
+        params.start = this.start instanceof Date ? this.start.toISOString() : 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;
+      const { statusCounts, tasksByName } = await api.Task.getTaskOverview(params);
+      this.statusCounts = statusCounts || this.statusCounts;
+      this.tasksByName = tasksByName || [];
     },
     openTaskGroupDetails(group) {
-      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}` });
+      const query = { dateRange: this.selectedRange || 'last_hour' };
+      if (this.selectedStatus && this.selectedStatus !== 'all') query.status = this.selectedStatus;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query });
     },
     openTaskGroupDetailsWithFilter(group, status) {
-      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query: status ? { status } : {} });
+      const query = { dateRange: this.selectedRange || 'last_hour' };
+      if (status) query.status = status;
+      else if (this.selectedStatus && this.selectedStatus !== 'all') query.status = this.selectedStatus;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query });
     },
     async onTaskCreated() {
       // Refresh the task data when a new task is created
@@ -213,114 +210,24 @@ module.exports = app => app.component('tasks', {
       }, 300);
     },
     async updateDateRange() {
-      const now = new Date();
-      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);
-          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;
-      }
-
+      const { start, end } = getDateRangeForRange(this.selectedRange);
       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);
-      });
+    pendingCount() {
+      return this.statusCounts.pending || 0;
     },
     succeededCount() {
-      return this.groupedTasks.succeeded ? this.groupedTasks.succeeded.length : 0;
+      return this.statusCounts.succeeded || 0;
     },
     failedCount() {
-      return this.groupedTasks.failed ? this.groupedTasks.failed.length : 0;
+      return this.statusCounts.failed || 0;
     },
     cancelledCount() {
-      return this.groupedTasks.cancelled ? this.groupedTasks.cancelled.length : 0;
-    },
-    pendingCount() {
-      return this.groupedTasks.pending ? this.groupedTasks.pending.length : 0;
+      return this.statusCounts.cancelled || 0;
     }
   },
   mounted: async function() {

package/local.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const mongoose = require('mongoose');
+const connect = require('./seed/connect');
+
+const express = require('express');
+const studio = require('./express');
+
+const getModelDescriptions = require('./backend/helpers/getModelDescriptions');
+
+Error.stackTraceLimit = 25;
+
+run().catch(err => {
+  console.error(err);
+  process.exit(-1);
+});
+
+async function run() {
+  const app = express();
+  await connect();
+
+  console.log(getModelDescriptions(mongoose.connection));
+
+  app.use('/studio', await studio(
+    null,
+    null,
+    {
+      __build: true,
+      __watch: process.env.WATCH,
+      _mothershipUrl: 'http://localhost:7777/.netlify/functions',
+      apiKey: 'TACO',
+      openAIAPIKey: process.env.OPENAI_API_KEY
+    })
+  );
+
+  await app.listen(3333);
+  console.log('Listening on port 3333');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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": {
@@ -20,6 +20,7 @@
     "extrovert": "^0.2.0",
     "marked": "15.0.12",
     "node-inspect-extracted": "3.x",
+    "regexp.escape": "^2.0.1",
     "tailwindcss": "3.4.0",
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
@@ -45,6 +46,8 @@
   },
   "scripts": {
     "lint": "eslint .",
+    "seed": "node seed/index.js",
+    "start": "node ./local.js",
     "tailwind": "tailwindcss -o ./frontend/public/tw.css",
     "tailwind:watch": "tailwindcss -o ./frontend/public/tw.css --watch",
     "test": "mocha test/*.test.js",

package/seed/connect.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const mongoose = require('mongoose');
+
+const uri = 'mongodb://127.0.0.1:27017/mongoose_studio_test';
+
+module.exports = async function connect() {
+  await mongoose.connect(uri);
+
+  mongoose.model('User', new mongoose.Schema({
+    name: String,
+    email: String,
+    role: String,
+    plan: String,
+    status: String,
+    isDeleted: Boolean,
+    lastLoginAt: Date,
+    createdAt: Date,
+    updatedAt: Date
+  }, { collection: 'User' }));
+
+  return mongoose.connection;
+};

package/seed/index.js

@@ -0,0 +1,101 @@
+'use strict';
+
+const connect = require('./connect');
+const mongoose = require('mongoose');
+
+if (require.main === module) {
+  run().catch(err => {
+    console.error(err);
+    process.exit(1);
+  });
+}
+
+async function run() {
+  await connect();
+  const { User } = mongoose.models;
+  const dashboardCollection = mongoose.connection.collection('studio__dashboards');
+  const now = new Date();
+
+  const users = [
+    {
+      name: 'Ada Lovelace',
+      email: 'ada@example.com',
+      role: 'admin',
+      plan: 'enterprise',
+      status: 'active',
+      isDeleted: false,
+      lastLoginAt: new Date('2026-03-11T14:21:00.000Z'),
+      createdAt: new Date('2025-10-03T09:15:00.000Z'),
+      updatedAt: now
+    },
+    {
+      name: 'Grace Hopper',
+      email: 'grace@example.com',
+      role: 'analyst',
+      plan: 'pro',
+      status: 'active',
+      isDeleted: false,
+      lastLoginAt: new Date('2026-03-10T17:42:00.000Z'),
+      createdAt: new Date('2025-11-16T13:05:00.000Z'),
+      updatedAt: now
+    },
+    {
+      name: 'Linus Torvalds',
+      email: 'linus@example.com',
+      role: 'editor',
+      plan: 'starter',
+      status: 'invited',
+      isDeleted: false,
+      lastLoginAt: null,
+      createdAt: new Date('2026-01-09T11:30:00.000Z'),
+      updatedAt: now
+    },
+    {
+      name: 'Margaret Hamilton',
+      email: 'margaret@example.com',
+      role: 'viewer',
+      plan: 'pro',
+      status: 'inactive',
+      isDeleted: false,
+      lastLoginAt: new Date('2026-02-22T08:00:00.000Z'),
+      createdAt: new Date('2025-12-01T16:20:00.000Z'),
+      updatedAt: now
+    }
+  ];
+
+  const dashboard = {
+    title: 'User directory table',
+    description: 'Sample dashboard for testing the dashboard-table component.',
+    code: `const users = await db.model('User')
+  .find({ isDeleted: false })
+  .sort({ createdAt: -1 })
+  .lean();
+
+return {
+  $table: {
+    columns: ['Name', 'Email', 'Role', 'Plan', 'Status', 'Last Login'],
+    rows: users.map(user => [
+      user.name,
+      user.email,
+      user.role,
+      user.plan,
+      user.status,
+      user.lastLoginAt ? new Date(user.lastLoginAt).toISOString().slice(0, 10) : 'Never'
+    ])
+  }
+};`
+  };
+
+  await User.deleteMany({ email: { $in: users.map(user => user.email) } });
+  await dashboardCollection.deleteMany({ title: dashboard.title });
+
+  const insertedUsers = await User.insertMany(users);
+  const insertedDashboard = await dashboardCollection.insertOne(dashboard);
+
+  console.log(`Inserted ${insertedUsers.length} users`);
+  console.log(`Inserted dashboard ${insertedDashboard.insertedId.toString()}`);
+
+  await mongoose.disconnect();
+}
+
+module.exports = run;