@mongoosejs/studio 0.0.29 → 0.0.31

package/frontend/public/index.html

@@ -22,6 +22,7 @@
     <div id="content"></div>
 
     <script src="https://unpkg.com/prismjs@1.29.0/prism.js" data-manual="true"></script>
+    <script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>
     <script src="app.js"></script>
   </body>
 </html>

package/frontend/public/tw.css

@@ -594,6 +594,34 @@ video {
   margin: 0px;
 }
 
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.-my-2 {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-0\.5 {
+  margin-left: -0.125rem;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -606,6 +634,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-\[-1px\] {
   margin-bottom: -1px;
 }
@@ -614,6 +646,14 @@ video {
   margin-left: 0.75rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-1\.5 {
+  margin-right: 0.375rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -626,10 +666,22 @@ video {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -646,6 +698,10 @@ video {
   display: table;
 }
 
+.flow-root {
+  display: flow-root;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -654,6 +710,10 @@ video {
   height: 2rem;
 }
 
+.h-\[1em\] {
+  height: 1em;
+}
+
 .h-\[300px\] {
   height: 300px;
 }
@@ -666,6 +726,10 @@ video {
   height: 100%;
 }
 
+.max-h-\[50vh\] {
+  max-height: 50vh;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -674,10 +738,22 @@ video {
   width: 16rem;
 }
 
+.w-\[50\%\] {
+  width: 50%;
+}
+
 .w-full {
   width: 100%;
 }
 
+.min-w-full {
+  min-width: 100%;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -686,6 +762,10 @@ video {
   flex-shrink: 0;
 }
 
+.shrink {
+  flex-shrink: 1;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -732,10 +812,44 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -770,6 +884,14 @@ video {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -778,6 +900,11 @@ video {
   border-right-width: 1px;
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -837,6 +964,10 @@ video {
   background-color: rgb(0 168 165 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -869,6 +1000,16 @@ video {
   padding-right: 0.625rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -884,10 +1025,41 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -896,10 +1068,39 @@ video {
   padding-right: 0.5rem;
 }
 
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pt-1 {
   padding-top: 0.25rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -910,6 +1111,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -922,6 +1128,10 @@ video {
   font-weight: 600;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -972,6 +1182,11 @@ video {
   color: rgb(7 89 133 / var(--tw-text-opacity));
 }
 
+.text-teal-600 {
+  --tw-text-opacity: 1;
+  color: rgb(0 168 165 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -983,6 +1198,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .outline-0 {
   outline-width: 0px;
 }
@@ -1006,6 +1226,10 @@ video {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+.ring-gray-900\/5 {
+  --tw-ring-color: rgb(17 24 39 / 0.05);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1018,6 +1242,31 @@ video {
   transition-duration: 150ms;
 }
 
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.focus-within\:ring-2:focus-within {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-within\:ring-inset:focus-within {
+  --tw-ring-inset: inset;
+}
+
+.focus-within\:ring-teal-600:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 168 165 / var(--tw-ring-opacity));
+}
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1068,10 +1317,21 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.hover\:text-teal-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(10 87 87 / var(--tw-text-opacity));
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }
 
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -1105,17 +1365,88 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .sm\:ml-16 {
+    margin-left: 4rem;
+  }
+
   .sm\:ml-6 {
     margin-left: 1.5rem;
   }
 
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
   .sm\:flex {
     display: flex;
   }
 
+  .sm\:flex-auto {
+    flex: 1 1 auto;
+  }
+
+  .sm\:flex-none {
+    flex: none;
+  }
+
+  .sm\:items-center {
+    align-items: center;
+  }
+
   .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(2rem * var(--tw-space-x-reverse));
     margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
   }
+
+  .sm\:rounded-xl {
+    border-radius: 0.75rem;
+  }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .sm\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .sm\:leading-6 {
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .lg\:pr-8 {
+    padding-right: 2rem;
+  }
 }

package/frontend/src/api.js

@@ -20,6 +20,9 @@ if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthori
 
 if (config__isLambda) {
   exports.Dashboard = {
+    createDashboard(params) {
+      return client.post('', { action: 'Dashboard.createDashboard', ...params }).then(res => res.data);
+    },
     getDashboard(params) {
       return client.post('', { action: 'Dashboard.getDashboard', ...params }).then(res => res.data);
     },
@@ -58,11 +61,14 @@ if (config__isLambda) {
   };
 } else {
   exports.Dashboard = {
+    createDashboard: function createDashboard(params) {
+      return client.post('/Dashboard/createDashboard', params).then(res => res.data);
+    },
     getDashboard: function getDashboard(params) {
-      return client.get('/Dashboard/getDashboard', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboard', params).then(res => res.data);
     },
     getDashboards: function getDashboards(params) {
-      return client.get('/Dashboard/getDashboards', params).then(res => res.data);
+      return client.put('/Dashboard/getDashboards', params).then(res => res.data);
     },
     updateDashboard: function updateDashboard(params) {
       return client.post('/Dashboard/updateDashboard', params).then(res => res.data);

package/frontend/src/create-dashboard/create-dashboard.html

@@ -0,0 +1,43 @@
+<div>
+  <div class="mt-4 text-gray-900 font-semibold">
+    Create New Dashboard
+  </div>
+  <div class="mt-4">
+    <label class="block text-sm font-medium leading-6 text-gray-900">Title</label>
+    <div class="mt-2">
+      <div class="w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600">
+        <input type="text" v-model="title" class="outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="ACME-123">
+      </div>
+    </div>
+  </div>
+  <div class="my-4">
+    <label class="block text-sm font-medium leading-6 text-gray-900">Code</label>
+    <div class="border border-gray-200">
+      <textarea class="p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    </div>
+  </div>
+  <async-button
+    @click="createDashboard()"
+    class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+    Submit
+  </async-button>
+  <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+        </svg>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm font-medium text-red-800">There were {{errors.length}} errors with your submission</h3>
+        <div class="mt-2 text-sm text-red-700">
+          <ul role="list" class="list-disc space-y-1 pl-5">
+            <li v-for="error in errors">
+              {{error}}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/frontend/src/create-dashboard/create-dashboard.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const api = require('../api');
+
+const template = require('./create-dashboard.html')
+
+module.exports = app => app.component('create-dashboard', {
+  template,
+  data: function() {
+    return {
+      title: '',
+      code: '',
+      errors: []
+    }
+  },
+  methods: {
+    async createDashboard() {
+      this.code = this._editor.getValue();
+      const { dashboard } = await api.Dashboard.createDashboard({ code: this.code, title: this.title }).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;
+      });
+      this.errors.length = 0;
+      this.$emit('close', dashboard);
+    },
+  },
+  mounted: function() {
+    this._editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
+      mode: 'javascript',
+      lineNumbers: true
+    });
+  },
+})

package/frontend/src/dashboard/dashboard.html

@@ -1,15 +1,24 @@
-<div class="dashboard">
-  <div v-if="dashboard">
-    <div>
-      <h2>{{name}}</h2>
+<div class="dashboard px-1">
+  <div v-if="dashboard" class="max-w-5xl mx-auto">
+    <div class="flex items-center w-full">
+      <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{dashboard.title}}</h2>
+      <div>
+        <button
+          v-if="!showEditor"
+          @click="showEditor = true"
+          type="button"
+          class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+          <img src="images/edit.svg" class="inline h-[1em]" /> Edit
+        </button>
+      </div>
     </div>
-    <div>
-      <pre>{{code}}</pre>
-      <button v-if="!showEditor" @click="toggleEditor" style="color: black;margin-right: 0.5em">Edit</button>
+    <div v-if="!showEditor" class="mt-4 mb-4">
+      <dashboard-result :result="result"></dashboard-result>
     </div>
     <div v-if="showEditor">
       <edit-dashboard :dashboardId="dashboard._id" :code="code" @close="showEditor=false;" @update="updateCode"></edit-dashboard>
     </div>
+    
   </div>
   <div v-if="!dashboard && status === 'loaded'">
     No dashboard with the given id could be found.

package/frontend/src/dashboard/dashboard.js

@@ -9,9 +9,9 @@ module.exports = app => app.component('dashboard', {
     return {
       status: 'loading',
       code: '',
-      name: '',
       showEditor: false,
-      dashboard: null
+      dashboard: null,
+      result: null
     }
   },
   methods: {
@@ -24,13 +24,13 @@ module.exports = app => app.component('dashboard', {
   },
   mounted: async function() {
     const dashboardId = this.$route.query.dashboardId;
-    const { dashboard } = await api.Dashboard.getDashboard({ params: { dashboardId: dashboardId } });
+    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
     this.dashboard = dashboard;
-    this.name = this.dashboard.name;
     this.code = this.dashboard.code;
+    this.result = result;
     this.status = 'loaded';
   }
 });

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html

@@ -0,0 +1,8 @@
+<div class="py-2">
+  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
+    {{header}}
+  </div>
+  <div class="text-xl py-2">
+    <canvas ref="chart"></canvas>
+  </div>
+</div>