Pull request #100: Add auth to ActionCable

Merge in COSMOSEE/base from cable-subscription-auth to master * commit '5299f1b0868192eec741511cbaac1391613a59d5': Fix typo Add defaultMinValidity property to CosmosAuth Fix adding items to subscription Refactor and add tokens to ActionCable connections
BallAerospace · Apr 28, 2021 · 4b65a16 · 4b65a16
2 parents 1f72319 + 5299f1b
commit 4b65a16
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 181 deletions.
diff --git a/cosmos-frontend-init/cosmosc2-tool-base/public/js/authConstants.js b/cosmos-frontend-init/cosmosc2-tool-base/public/js/authConstants.js
@@ -0,0 +1,29 @@
+/*
+# Copyright 2021 Ball Aerospace & Technologies Corp.
+# All Rights Reserved.
+#
+# This program is free software; you can modify and/or redistribute it
+# under the terms of the GNU Affero General Public License
+# as published by the Free Software Foundation; version 3 with
+# attribution addendums as found in the LICENSE.txt
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# This program may also be used under the terms of a commercial or
+# enterprise edition license of COSMOS if purchased from the
+# copyright holder
+*/
+
+// This is typically used with the CosmosAuth.updateToken method.
+// Passing a value of 30 to this method means that the access token
+// will be updated if it is currently expired or if it will expire
+// within the next 30 seconds.
+Object.defineProperty(CosmosAuth, 'defaultMinValidity', {
+  value: 30,
+  writable: false,
+  enumerable: true,
+  configurable: false,
+})
diff --git a/cosmos-frontend-init/cosmosc2-tool-base/src/components/Notifications.vue b/cosmos-frontend-init/cosmosc2-tool-base/src/components/Notifications.vue
@@ -196,14 +196,14 @@
 </template>
 
 <script>
-import * as ActionCable from 'actioncable'
 import { formatDistanceToNow } from 'date-fns'
 import { AstroStatusColors } from '../../../packages/cosmosc2-tool-common/src/components/icons'
 import {
   highestSeverity,
   orderBySeverity,
   groupBySeverity,
 } from '../util/AstroStatus'
+import Cable from '../../../packages/cosmosc2-tool-common/src/services/cable.js'
 
 export default {
   props: {
@@ -215,8 +215,8 @@ export default {
   data: function () {
     return {
       AstroStatusColors,
-      cable: ActionCable.Cable,
-      subscription: ActionCable.Channel,
+      cable: new Cable(),
+      subscription: null,
       notifications: [],
       showNotificationPane: false,
       toast: false,
@@ -299,7 +299,6 @@ export default {
   },
   created: function () {
     this.showToastSetting = localStorage.notoast === 'false'
-    this.cable = ActionCable.createConsumer('/cosmos-api/cable')
     this.subscribe()
   },
   destroyed: function () {
@@ -351,24 +350,22 @@ export default {
       window.open(url, '_blank')
     },
     subscribe: function () {
-      CosmosAuth.updateToken(30).then(() => {
-        const startOptions = {
-          start_offset:
-            localStorage.notificationStreamOffset ||
-            localStorage.lastReadNotification,
-        }
-        this.subscription = this.cable.subscriptions.create(
+      this.cable
+        .createSubscription(
+          'NotificationsChannel',
+          'DEFAULT',
           {
-            channel: 'NotificationsChannel',
-            scope: 'DEFAULT',
-            token: localStorage.token,
-            ...startOptions,
+            received: (data) => this.received(data),
           },
           {
-            received: (data) => this.received(data),
+            start_offset:
+              localStorage.notificationStreamOffset ||
+              localStorage.lastReadNotification,
           }
         )
-      })
+        .then((subscription) => {
+          this.subscription = subscription
+        })
     },
     received: function (data) {
       const parsed = JSON.parse(data)

diff --git a/cosmos-frontend-init/cosmosc2-tool-base/src/index.ejs b/cosmos-frontend-init/cosmosc2-tool-base/src/index.ejs
@@ -50,6 +50,7 @@
   <script src="/js/system-6.8.3.min.js"></script>
   <script src="/js/amd-6.8.3.min.js"></script>
   <script src="/js/auth.js"></script>
+  <script src="/js/authConstants.js"></script>
 </head>
 
 <body>

diff --git a/cosmos-frontend-init/packages/cosmosc2-tool-common/src/components/Graph.vue b/cosmos-frontend-init/packages/cosmosc2-tool-common/src/components/Graph.vue
@@ -175,10 +175,10 @@
 
 <script>
 import DateTimeChooser from './DateTimeChooser'
-import * as ActionCable from 'actioncable'
 import uPlot from 'uplot'
 import bs from 'binary-search'
 import { toDate, format, getTime } from 'date-fns'
+import Cable from '../services/cable.js'
 
 require('uplot/dist/uPlot.min.css')
 
@@ -264,7 +264,7 @@ export default {
       drawInterval: null,
       zoomChart: false,
       zoomOverview: false,
-      cable: ActionCable.Cable,
+      cable: new Cable(),
       subscription: null,
       colors: [
         'blue',
@@ -296,8 +296,6 @@ export default {
     },
   },
   created() {
-    // Creating the cable can be done once, subscriptions come and go
-    this.cable = ActionCable.createConsumer('/cosmos-api/cable')
     this.title = 'Graph ' + this.id
     for (const [index, item] of this.items.entries()) {
       this.data.push([]) // initialize the empty data arrays
@@ -661,43 +659,46 @@ export default {
       }
     },
     subscribe(endTime = null) {
-      let subscription = this.cable.subscriptions.create(
-        {
-          channel: 'StreamingChannel',
-          scope: 'DEFAULT',
-        },
-        {
+      this.cable
+        .createSubscription('StreamingChannel', 'DEFAULT', {
           received: (data) => this.received(data),
           connected: () => {
-            var items = []
-            this.items.forEach((item) => {
-              items.push(
-                'TLM__' +
-                  item.targetName +
-                  '__' +
-                  item.packetName +
-                  '__' +
-                  item.itemName +
-                  '__' +
-                  item.valueType
-              )
-            })
-            subscription.perform('add', {
-              scope: 'DEFAULT',
-              mode: 'DECOM',
-              items: items,
-              start_time: this.graphStartDateTime,
-              end_time: endTime,
-            })
+            this.onConnected(endTime)
           },
           // TODO: How should we handle server side disconnect
           // disconnected: () => console.log('disconnected'),
-        }
-      )
-      // Store the subscription if we haven't already
-      if (this.subscription === null) {
-        this.subscription = subscription
-      }
+        })
+        .then((subscription) => {
+          // Store the subscription if we haven't already
+          if (this.subscription === null) {
+            this.subscription = subscription
+          }
+        })
+    },
+    onConnected(endTime) {
+      var items = []
+      this.items.forEach((item) => {
+        items.push(
+          'TLM__' +
+            item.targetName +
+            '__' +
+            item.packetName +
+            '__' +
+            item.itemName +
+            '__' +
+            item.valueType
+        )
+      })
+      CosmosAuth.updateToken(CosmosAuth.defaultMinValidity).then(() => {
+        this.subscription.perform('add', {
+          scope: 'DEFAULT',
+          mode: 'DECOM',
+          token: localStorage.token,
+          items: items,
+          start_time: this.graphStartDateTime,
+          end_time: endTime,
+        })
+      })
     },
     // throttle(cb, limit) {
     //   var wait = false
@@ -840,11 +841,14 @@ export default {
       this.indexes[key] = index
 
       if (this.subscription) {
-        this.subscription.perform('add', {
-          scope: 'DEFAULT',
-          items: [key],
-          start_time: this.graphStartDateTime,
-          end_time: this.graphEndDateTime, // normally null which means continue in real-time
+        CosmosAuth.updateToken(CosmosAuth.defaultMinValidity).then(() => {
+          this.subscription.perform('add', {
+            scope: 'DEFAULT',
+            token: localStorage.token,
+            items: [key],
+            start_time: this.graphStartDateTime,
+            end_time: this.graphEndDateTime, // normally null which means continue in real-time
+          })
         })
       }
     },

diff --git a/cosmos-frontend-init/packages/cosmosc2-tool-common/src/components/LogMessages.vue b/cosmos-frontend-init/packages/cosmosc2-tool-common/src/components/LogMessages.vue
@@ -58,9 +58,9 @@
 </template>
 
 <script>
-import * as ActionCable from 'actioncable'
 import { parseISO, format } from 'date-fns'
 import AstroBadge from './icons/AstroBadge'
+import Cable from '../services/cable.js'
 
 export default {
   components: {
@@ -82,34 +82,37 @@ export default {
         { text: 'Source', value: 'microservice_name' },
         { text: 'Message', value: 'log' },
       ],
-      cable: ActionCable.Cable,
-      subscription: ActionCable.Channel,
+      cable: new Cable(),
+      subscription: null,
     }
   },
   created() {
-    this.cable = ActionCable.createConsumer('/cosmos-api/cable')
-    this.subscription = this.cable.subscriptions.create(
-      {
-        channel: 'MessagesChannel',
-        history_count: this.history_count,
-        scope: 'DEFAULT',
-      },
-      {
-        received: (data) => {
-          let messages = JSON.parse(data)
-          if (messages.length > this.history_count) {
-            messages.splice(0, messages.length - this.history_count)
-          }
-          messages.forEach((message) => {
-            message.timestamp = this.formatDate(message['@timestamp'])
-          })
-          this.data = messages.reverse().concat(this.data)
-          if (this.data.length > this.history_count) {
-            this.data.length = this.history_count
-          }
+    this.cable
+      .createSubscription(
+        'MessagesChannel',
+        'DEFAULT',
+        {
+          received: (data) => {
+            let messages = JSON.parse(data)
+            if (messages.length > this.history_count) {
+              messages.splice(0, messages.length - this.history_count)
+            }
+            messages.forEach((message) => {
+              message.timestamp = this.formatDate(message['@timestamp'])
+            })
+            this.data = messages.reverse().concat(this.data)
+            if (this.data.length > this.history_count) {
+              this.data.length = this.history_count
+            }
+          },
         },
-      }
-    )
+        {
+          history_count: this.history_count,
+        }
+      )
+      .then((subscription) => {
+        this.subscription = subscription
+      })
   },
   destroyed() {
     if (this.subscription) {

diff --git a/cosmos-frontend-init/packages/cosmosc2-tool-common/src/components/_ChartJS.vue b/cosmos-frontend-init/packages/cosmosc2-tool-common/src/components/_ChartJS.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import * as ActionCable from 'actioncable'
 import Chart from 'chart.js'
 import 'chartjs-adapter-luxon'
 import { DateTime } from 'luxon'
+import Cable from '../services/cable.js'
 
 export default {
   props: {
@@ -55,8 +55,8 @@ export default {
       running: false,
       paused: false,
       drawInterval: null,
-      cable: ActionCable.Cable,
-      subscription: ActionCable.Channel,
+      cable: new Cable(),
+      subscription: null,
       colors: [
         'blue',
         'red',
@@ -83,10 +83,6 @@ export default {
       ],
     }
   },
-  created() {
-    // Creating the cable can be done once, subscriptions come and go
-    this.cable = ActionCable.createConsumer('/cosmos-api/cable')
-  },
   mounted() {
     // TODO: This is demo / performance code of multiple items with many data points
     // 10000 pts takes 1.7s, Chrome consume 530MB mem
@@ -146,9 +142,8 @@ export default {
   },
   methods: {
     subscribe() {
-      this.subscription = this.cable.subscriptions.create(
-        'PreidentifiedChannel',
-        {
+      this.cable
+        .createSubscription('PreidentifiedChannel', null, {
           received: (data) => this.received(data),
           connected: () => {
             this.items.forEach((item) => {
@@ -160,8 +155,10 @@ export default {
           },
           // TODO: How should we handle server side disconnect
           //disconnected: () => alert('disconnected')
-        }
-      )
+        })
+        .then((subscription) => {
+          this.subscription = subscription
+        })
     },
     start() {
       if (this.running || this.items.length === 0) {

diff --git a/cosmos-frontend-init/packages/cosmosc2-tool-common/src/services/api.js b/cosmos-frontend-init/packages/cosmosc2-tool-common/src/services/api.js
@@ -21,7 +21,7 @@ import axios from 'axios'
 
 const request = async function (method, url, data = {}, params = {}) {
   try {
-    await CosmosAuth.updateToken(30)
+    await CosmosAuth.updateToken(CosmosAuth.defaultMinValidity)
   } catch (error) {
     CosmosAuth.login()
   }