Merge pull request #861 from OpenC3/fix_toasts

fix toasts

openc3-cosmos-init/plugins/openc3-tool-base/package.json

@@ -11,6 +11,7 @@
     "@rails/actioncable": "7.0.8",
     "axios": "0.27.2",
     "date-fns": "2.30.0",
+    "import-map-overrides": "3.1.0",
     "regenerator-runtime": "0.14.0",
     "single-spa": "5.9.5",
     "systemjs": "6.14.2",

openc3-cosmos-init/plugins/openc3-tool-base/src/index-allow-http.ejs

@@ -61,7 +61,7 @@
   <link rel="preload" href="/js/vuex-3.6.2.min.js" as="script" />
   <script type="systemjs-importmap" src="/openc3-api/map.json"></script>
   <script src="/js/auth.js"></script>
-  <script src="/js/import-map-overrides-3.0.0.js"></script>
+  <script src="/js/import-map-overrides-3.1.0.min.js"></script>
   <!-- systemjs homepage: https://github.com/systemjs/systemjs/releases
     We use system.js instead of s.js which includes global and module-types.
     We also explictily use amd (asynchronous module definition) which uses named-register

openc3-cosmos-init/plugins/openc3-tool-base/src/index.ejs

@@ -61,7 +61,7 @@
   <link rel="preload" href="/js/vuex-3.6.2.min.js" as="script" />
   <script type="systemjs-importmap" src="/openc3-api/map.json"></script>
   <script src="/js/auth.js"></script>
-  <script src="/js/import-map-overrides-3.0.0.js"></script>
+  <script src="/js/import-map-overrides-3.1.0.min.js"></script>
   <!-- systemjs homepage: https://github.com/systemjs/systemjs/releases
     We use system.js instead of s.js which includes global and module-types.
     We also explictily use amd (asynchronous module definition) which uses named-register

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/plugins/notify/Toast.vue

@@ -16,9 +16,18 @@
         >
           {{ toastNotification.title }}:
         </span>
-        <span class="text-body-2 notification-text">
+        <span
+          v-if="toastNotification.body"
+          class="text-body-2 notification-text"
+        >
           {{ toastNotification.body }}
         </span>
+        <span
+          v-if="toastNotification.log"
+          class="text-body-2 notification-text"
+        >
+          {{ toastNotification.log }}
+        </span>
       </div>
       <v-spacer />
       <v-btn text @click.stop="hide" class="notification-text"> Dismiss </v-btn>
@@ -42,6 +51,7 @@ export default {
       toastNotification: {
         title: 'Title here',
         body: 'This is the notification body',
+        log: 'Overall log here',
       },
       timeout: null,
     }
@@ -60,7 +70,7 @@ export default {
       return `
         --toast-bg-color:${AstroStatusColors[this.toastNotification.severity]};
         --toast-fg-color:${getStatusColorContrast(
-          this.toastNotification.severity
+          this.toastNotification.severity,
         )};
       `
     },
@@ -79,6 +89,7 @@ export default {
       }
       this.toastNotification = toastNotification
       this.showToast = true
+      this.cancelAutohide()
       if (duration) {
         this.timeout = setTimeout(() => {
           this.hide()
@@ -90,7 +101,10 @@ export default {
       this.showToast = false
     },
     cancelAutohide: function () {
-      clearTimeout(this.timeout)
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+        this.timeout = null
+      }
     },
     expand: function () {
       this.cancelAutohide()

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/plugins/notify/index.js

@@ -16,7 +16,7 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 */
 
@@ -47,6 +47,7 @@ class Notify {
     method,
     title,
     body,
+    log,
     severity,
     duration,
     type = 'alert',
@@ -56,29 +57,35 @@ class Notify {
     this.mount()
     if (logToConsole) {
       // eslint-disable-next-line no-console
-      console.log(`${severity.toUpperCase()} - ${title}: ${body}`)
+      if (log) {
+        console.log(`${severity.toUpperCase()} - ${log}`)
+      } else {
+        console.log(`${severity.toUpperCase()} - ${title}: ${body}`)
+      }
     }
     if (saveToHistory) {
-      this.$store.commit('notifyAddHistory', { title, body, severity })
+      this.$store.commit('notifyAddHistory', { title, body, log, severity })
     }
-    this[method]({ title, body, severity, duration, type })
+    this[method]({ title, body, log, severity, duration, type })
   }
 
-  toast = function ({ title, body, severity, duration, type }) {
+  toast = function ({ title, body, log, severity, duration, type }) {
     this.$root.toast(
       {
         title,
         body,
+        log,
         severity,
         type,
       },
-      duration
+      duration,
     )
   }
 
   critical = function ({
     title,
     body,
+    log,
     type,
     duration,
     logToConsole,
@@ -89,15 +96,20 @@ class Notify {
       severity: 'critical',
       title,
       body,
+      log,
       type,
       duration,
       logToConsole,
       saveToHistory,
     })
   }
+  FATAL = this.critical
+  ERROR = this.critical
+
   serious = function ({
     title,
     body,
+    log,
     type,
     duration,
     logToConsole,
@@ -108,6 +120,7 @@ class Notify {
       severity: 'serious',
       title,
       body,
+      log,
       type,
       duration,
       logToConsole,
@@ -117,6 +130,7 @@ class Notify {
   caution = function ({
     title,
     body,
+    log,
     type,
     duration,
     logToConsole,
@@ -127,15 +141,19 @@ class Notify {
       severity: 'caution',
       title,
       body,
+      log,
       type,
       duration,
       logToConsole,
       saveToHistory,
     })
   }
+  WARN = this.caution
+
   normal = function ({
     title,
     body,
+    log,
     type,
     duration,
     logToConsole,
@@ -146,15 +164,20 @@ class Notify {
       severity: 'normal',
       title,
       body,
+      log,
       type,
       duration,
       logToConsole,
       saveToHistory,
     })
   }
+  INFO = this.normal
+  DEBUG = this.normal
+
   standby = function ({
     title,
     body,
+    log,
     type,
     duration,
     logToConsole,
@@ -165,6 +188,7 @@ class Notify {
       severity: 'standby',
       title,
       body,
+      log,
       type,
       duration,
       logToConsole,
@@ -174,6 +198,7 @@ class Notify {
   off = function ({
     title,
     body,
+    log,
     type,
     duration,
     logToConsole,
@@ -184,6 +209,7 @@ class Notify {
       severity: 'off',
       title,
       body,
+      log,
       type,
       duration,
       logToConsole,

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/base/components/Notifications.vue

@@ -253,7 +253,7 @@ export default {
             header: severity.charAt(0).toUpperCase() + severity.slice(1),
           }
           return [header, ...groups[severity]]
-        }
+        },
       )
       if (this.readNotifications.length) {
         result = result.concat([{ header: 'Read' }, ...this.readNotifications])
@@ -264,7 +264,7 @@ export default {
   watch: {
     showNotificationPane: function (val) {
       if (!val) {
-        if (this.selectedNotification.title) {
+        if (this.selectedNotification.log) {
           this.notificationDialog = false
           this.selectedNotification = {}
         } else {
@@ -337,7 +337,7 @@ export default {
               localStorage.notificationStreamOffset ||
               localStorage.lastReadNotification,
             types: ['notification', 'alert'],
-          }
+          },
         )
         .then((subscription) => {
           this.subscription = subscription
@@ -364,16 +364,19 @@ export default {
 
       if (this.showToast && foundToast) {
         let duration = 5000
-        if (['FATAL', 'ERROR'].includes(notification.severity)) {
+        if (['FATAL', 'ERROR'].includes(this.toastNotification.severity)) {
           duration = null
         }
 
-        this.$notify[this.toastNotification.severity]({
-          ...this.toastNotification,
-          type: 'notification',
-          duration: duration,
-          saveToHistory: false,
-        })
+        // Notify takes a minute to be ready on app load
+        if (this.$notify) {
+          this.$notify[this.toastNotification.severity]({
+            ...this.toastNotification,
+            type: 'notification',
+            duration: duration,
+            saveToHistory: false,
+          })
+        }
       }
 
       if (
@@ -384,7 +387,7 @@ export default {
           0,
           this.notifications.length +
             parsed.length -
-            NOTIFICATION_HISTORY_MAX_LENGTH
+            NOTIFICATION_HISTORY_MAX_LENGTH,
         )
       }
       this.notifications = this.notifications.concat(parsed)

scripts/release/package_audit.rb

@@ -74,7 +74,7 @@
 check_container_version(client, containers, 'library/traefik')
 check_minio(client, containers)
 check_container_version(client, containers, 'library/redis')
-base_pkgs = %w(regenerator-runtime single-spa systemjs vue vue-router vuetify vuex)
+base_pkgs = %w(import-map-overrides regenerator-runtime single-spa systemjs vue vue-router vuetify vuex)
 check_tool_base('openc3-cosmos-init/plugins/openc3-tool-base', base_pkgs)
 
 puts "\n*** If you update a container version re-run to ensure there aren't additional updates! ***\n\n"

scripts/release/package_audit_lib.rb

@@ -422,6 +422,9 @@ def check_tool_base(path, base_pkgs)
           `curl https://cdnjs.cloudflare.com/ajax/libs/#{package}/#{latest}/#{package}.min.js --output public/js/#{package}-#{latest}.min.js`
         when 'regenerator-runtime'
           `curl https://cdn.jsdelivr.net/npm/#{package}@#{latest}/runtime.min.js --output public/js/#{package}-#{latest}.min.js`
+        when 'import-map-overrides'
+          `curl https://cdn.jsdelivr.net/npm/#{package}@#{latest}/dist/import-map-overrides.js --output public/js/#{package}-#{latest}.min.js`
+          `curl https://cdn.jsdelivr.net/npm/#{package}@#{latest}/dist/import-map-overrides.js.map --output public/js/#{package}-#{latest}.min.js.map`
         when 'keycloak-js'
           `curl https://cdn.jsdelivr.net/npm/#{package}@#{latest}/dist/keycloak.min.js --output public/js/#{package}-#{latest}.min.js`
           `curl https://cdn.jsdelivr.net/npm/#{package}@#{latest}/dist/keycloak.min.js.map --output public/js/#{package}-#{latest}.min.js.map`