@mongoosejs/studio 0.1.16 → 0.1.18

package/frontend/src/models/models.html

@@ -79,13 +79,6 @@
             >
             Delete
           </button>
-          <button
-            @click="openIndexModal"
-            type="button"
-            v-show="!selectMultiple"
-            class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
-            Indexes
-          </button>
           <button
             @click="shouldShowCreateModal = true;"
             type="button"
@@ -100,6 +93,38 @@
             class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
             Fields
           </button>
+          <div class="relative" v-show="!selectMultiple" ref="actionsMenuContainer" @keyup.esc.prevent="closeActionsMenu">
+            <button
+              @click="toggleActionsMenu"
+              type="button"
+              aria-label="More actions"
+              class="rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+              </svg>
+            </button>
+            <div
+              v-if="showActionsMenu"
+              class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20"
+            >
+              <div class="py-1">
+                <button
+                  @click="openIndexModal"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                >
+                  Indexes
+                </button>
+                <button
+                  @click="openCollectionInfo"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                >
+                  Collection Info
+                </button>
+              </div>
+            </div>
+          </div>
           <span class="isolate inline-flex rounded-md shadow-sm">
             <button
               @click="setOutputType('table')"
@@ -193,7 +218,12 @@
       <div v-for="index in mongoDBIndexes" class="w-full flex items-center">
         <div class="grow shrink text-left flex justify-between items-center" v-if="index.name != '_id_'">
           <div>
-            <div class="font-bold">{{ index.name }}</div>
+            <div class="font-bold flex items-center gap-2">
+              <div>{{ index.name }}</div>
+              <div v-if="isTTLIndex(index)" class="rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700">
+                TTL: {{ formatTTL(index.expireAfterSeconds) }}
+              </div>
+            </div>
             <div class="text-sm font-mono">{{ JSON.stringify(index.key) }}</div>
           </div>
           <div>
@@ -208,6 +238,44 @@
       </div>
     </template>
   </modal>
+  <modal v-if="shouldShowCollectionInfoModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowCollectionInfoModal = false">&times;</div>
+      <div class="text-xl font-bold mb-2">Collection Info</div>
+      <div v-if="!collectionInfo" class="text-gray-600">Loading collection details...</div>
+      <div v-else class="space-y-3">
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Documents</div>
+          <div class="text-gray-900">{{ formatNumber(collectionInfo.documentCount) }}</div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Indexes</div>
+          <div class="text-gray-900">{{ formatNumber(collectionInfo.indexCount) }}</div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Total Index Size</div>
+          <div class="text-gray-900">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Total Storage Size</div>
+          <div class="text-gray-900">{{ formatCollectionSize(collectionInfo.size) }}</div>
+        </div>
+        <div class="flex flex-col gap-1">
+          <div class="flex justify-between gap-4">
+            <div class="font-semibold text-gray-700">Collation</div>
+            <div class="text-gray-900">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>
+          </div>
+          <div v-if="collectionInfo.hasCollation" class="rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto">
+            <pre class="whitespace-pre-wrap">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>
+          </div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Capped</div>
+          <div class="text-gray-900">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>
+        </div>
+      </div>
+    </template>
+  </modal>
   <modal v-if="shouldShowFieldModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>

package/frontend/src/models/models.js

@@ -3,6 +3,7 @@
 const api = require('../api');
 const template = require('./models.html');
 const mpath = require('mpath');
+const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 appendCSS(require('./models.css'));
@@ -34,6 +35,7 @@ module.exports = app => app.component('models', {
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
     shouldShowIndexModal: false,
+    shouldShowCollectionInfoModal: false,
     shouldShowUpdateMultipleModal: false,
     shouldShowDeleteMultipleModal: false,
     shouldExport: {},
@@ -44,7 +46,9 @@ module.exports = app => app.component('models', {
     outputType: 'table', // json, table
     hideSidebar: null,
     lastSelectedIndex: null,
-    error: null
+    error: null,
+    showActionsMenu: false,
+    collectionInfo: null
   }),
   created() {
     this.currentModel = this.model;
@@ -53,12 +57,23 @@ module.exports = app => app.component('models', {
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
+    document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
   },
   async mounted() {
     this.onScroll = () => this.checkIfScrolledToBottom();
     document.addEventListener('scroll', this.onScroll, true);
     this.onPopState = () => this.initSearchFromUrl();
     window.addEventListener('popstate', this.onPopState, true);
+    this.onOutsideActionsMenuClick = event => {
+      if (!this.showActionsMenu) {
+        return;
+      }
+      const actionsMenu = this.$refs.actionsMenuContainer;
+      if (actionsMenu && !actionsMenu.contains(event.target)) {
+        this.closeActionsMenu();
+      }
+    };
+    document.addEventListener('click', this.onOutsideActionsMenuClick, true);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
     if (this.currentModel == null && this.models.length > 0) {
@@ -160,6 +175,13 @@ module.exports = app => app.component('models', {
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
+      vanillatoasts.create({
+        title: 'Index dropped!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async closeCreationModal() {
       this.shouldShowCreateModal = false;
@@ -232,11 +254,86 @@ module.exports = app => app.component('models', {
       }
     },
     async openIndexModal() {
+      this.closeActionsMenu();
       this.shouldShowIndexModal = true;
       const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel });
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
+    toggleActionsMenu() {
+      this.showActionsMenu = !this.showActionsMenu;
+    },
+    closeActionsMenu() {
+      this.showActionsMenu = false;
+    },
+    async openCollectionInfo() {
+      this.closeActionsMenu();
+      this.shouldShowCollectionInfoModal = true;
+      this.collectionInfo = null;
+      const { info } = await api.Model.getCollectionInfo({ model: this.currentModel });
+      this.collectionInfo = info;
+    },
+    isTTLIndex(index) {
+      return index != null && index.expireAfterSeconds != null;
+    },
+    formatTTL(expireAfterSeconds) {
+      if (typeof expireAfterSeconds !== 'number') {
+        return '';
+      }
+
+      let remaining = expireAfterSeconds;
+      const days = Math.floor(remaining / (24 * 60 * 60));
+      remaining = remaining % (24 * 60 * 60);
+      const hours = Math.floor(remaining / (60 * 60));
+      remaining = remaining % (60 * 60);
+      const minutes = Math.floor(remaining / 60);
+      const seconds = remaining % 60;
+
+      const parts = [];
+      if (days > 0) {
+        parts.push(`${days} day${days === 1 ? '' : 's'}`);
+      }
+      if (hours > 0) {
+        parts.push(`${hours} hour${hours === 1 ? '' : 's'}`);
+      }
+      if (minutes > 0) {
+        parts.push(`${minutes} minute${minutes === 1 ? '' : 's'}`);
+      }
+      if (seconds > 0 || parts.length === 0) {
+        parts.push(`${seconds} second${seconds === 1 ? '' : 's'}`);
+      }
+
+      return parts.join(', ');
+    },
+    formatCollectionSize(size) {
+      if (typeof size !== 'number') {
+        return 'Unknown';
+      }
+
+      const KB = 1024;
+      const MB = KB * 1024;
+      const GB = MB * 1024;
+      const TB = GB * 1024;
+
+      if (size >= TB) {
+        return `${(size / TB).toFixed(3)} TB`;
+      } else if (size >= GB) {
+        return `${(size / GB).toFixed(3)} GB`;
+      } else if (size >= MB) {
+        return `${(size / MB).toFixed(3)} MB`;
+      } else if (size >= KB) {
+        return `${(size / KB).toFixed(3)} KB`;
+      } else {
+        return `${size.toLocaleString()} bytes`;
+      }
+    },
+    formatNumber(value) {
+      if (typeof value !== 'number') {
+        return 'Unknown';
+      }
+
+      return value.toLocaleString();
+    },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
         return 'text-gray-500';
@@ -410,6 +507,13 @@ module.exports = app => app.component('models', {
         this.documents[index] = res.doc;
       }
       this.edittingDoc = null;
+      vanillatoasts.create({
+        title: 'Document updated!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     handleDocumentClick(document, event) {
       if (this.selectMultiple) {
@@ -473,6 +577,13 @@ module.exports = app => app.component('models', {
       this.lastSelectedIndex = null;
       this.shouldShowDeleteMultipleModal = false;
       this.selectMultiple = false;
+      vanillatoasts.create({
+        title: 'Documents deleted!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async updateDocuments() {
       await this.getDocuments();

package/frontend/src/update-document/update-document.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const vanillatoasts = require('vanillatoasts');
 
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
@@ -28,35 +29,35 @@ module.exports = app => app.component('update-document', {
   methods: {
     async updateDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
-      if (this.multiple) {
-        const ids = this.document.map(x => x._id);
-        await api.Model.updateDocuments({ model: this.currentModel, _id: ids, update: data }).catch(err => {
-          if (err.response?.data?.message) {
-            console.log(err.response.data);
-            const message = err.response.data.message.split(': ').slice(1).join(': ');
-            this.errors = message.split(',').map(error => {
-              return error.split(': ').slice(1).join(': ').trim();
-            });
-            throw new Error(err.response?.data?.message);
-          }
-          throw err;
-        });
-      } else {
-        await api.Model.updateDocument({ model: this.currentModel, _id: this.document._id, update: data }).catch(err => {
-          if (err.response?.data?.message) {
-            console.log(err.response.data);
-            const message = err.response.data.message.split(': ').slice(1).join(': ');
-            this.errors = message.split(',').map(error => {
-              return error.split(': ').slice(1).join(': ').trim();
-            });
-            throw new Error(err.response?.data?.message);
-          }
-          throw err;
+      try {
+        if (this.multiple) {
+          const ids = this.document.map(x => x._id);
+          await api.Model.updateDocuments({ model: this.currentModel, _id: ids, update: data });
+        } else {
+          await api.Model.updateDocument({ model: this.currentModel, _id: this.document._id, update: data });
+        }
+        this.errors.length = 0;
+        this.$emit('update');
+        this.$emit('close');
+        this.$nextTick(() => {
+          vanillatoasts.create({
+            title: this.multiple ? 'Documents updated!' : 'Document updated!',
+            type: 'success',
+            timeout: 3000,
+            icon: 'images/success.png',
+            positionClass: 'bottomRight'
+          });
         });
+      } catch (err) {
+        if (err.response?.data?.message) {
+          console.log(err.response.data);
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.errors = message.split(',').map(error => {
+            return error.split(': ').slice(1).join(': ').trim();
+          });
+        }
+        throw err;
       }
-      this.errors.length = 0;
-      this.$emit('update');
-      this.$emit('close');
     }
   },
   mounted: function() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {

package/frontend/src/edit-array/edit-array.css

@@ -1,3 +0,0 @@
-.edit-array button {
-  margin-top: 0.5em;
-}

package/frontend/src/list-array/list-array.css

@@ -1,8 +0,0 @@
-.list-array pre {
-  max-height: 6.5em;
-  max-width: 30em;
-}
-
-.list-array pre.maximized {
-  max-height: auto;
-}