From 2ec25b75c1aa5bc73eadb29513986c32b498e8f9 Mon Sep 17 00:00:00 2001
From: downtownallday <downtownallday@gmail.com>
Date: Sat, 10 Apr 2021 09:29:29 -0400
Subject: [PATCH] Switch to ES6 modules

---
 management/reporting/ui/capture-db-stats.js   |  9 ++++--
 .../ui/chart-multi-line-timeseries.js         |  8 +++--
 management/reporting/ui/chart-pie.js          |  7 +++--
 .../ui/chart-stacked-bar-timeseries.js        |  5 ++-
 management/reporting/ui/chart-table.js        |  2 +-
 management/reporting/ui/charting.js           | 20 ++++++------
 management/reporting/ui/date-range-picker.js  |  5 ++-
 management/reporting/ui/index.html            | 28 ++---------------
 management/reporting/ui/index.js              | 31 +++++++++++--------
 management/reporting/ui/page-reports-main.js  | 31 ++++++++++++++-----
 management/reporting/ui/page-settings.js      | 13 ++++++--
 .../reporting/ui/panel-flagged-connections.js | 19 +++++++++---
 .../reporting/ui/panel-messages-received.js   | 14 ++++++---
 .../reporting/ui/panel-messages-sent.js       | 18 ++++++++---
 .../ui/panel-remote-sender-activity.js        |  6 +++-
 .../reporting/ui/panel-user-activity.js       |  9 ++++--
 .../reporting/ui/reports-page-header.js       |  6 ++--
 management/reporting/ui/settings.js           |  7 +++--
 management/reporting/ui/wbr-text.js           |  2 +-
 management/ui-common/authentication.js        |  7 +++--
 management/ui-common/exceptions.js            |  6 ++--
 management/ui-common/page-header.js           |  6 ++--
 management/ui-common/page-layout.js           |  2 +-
 23 files changed, 159 insertions(+), 102 deletions(-)

diff --git a/management/reporting/ui/capture-db-stats.js b/management/reporting/ui/capture-db-stats.js
index b828dc5d..59d5a049 100644
--- a/management/reporting/ui/capture-db-stats.js
+++ b/management/reporting/ui/capture-db-stats.js
@@ -1,9 +1,14 @@
+import { BvTable, ConnectionDisposition, DateFormatter } from "./charting.js";
+import { spinner } from "../../ui-common/page-header.js";
 
-
-Vue.component('capture-db-stats', {
+export default Vue.component('capture-db-stats', {
     props: {
     },
 
+    components: {
+        spinner,
+    },
+
     template:'<div>'+
         '<template v-if="stats">'+
            '<caption class="text-nowrap">Database date range</caption><div class="ml-2">First: {{stats.db_stats.connect_time.min_str}}</div><div class="ml-2">Last: {{stats.db_stats.connect_time.max_str}}</div>'+
diff --git a/management/reporting/ui/chart-multi-line-timeseries.js b/management/reporting/ui/chart-multi-line-timeseries.js
index b56ae537..bfd47e71 100644
--- a/management/reporting/ui/chart-multi-line-timeseries.js
+++ b/management/reporting/ui/chart-multi-line-timeseries.js
@@ -1,4 +1,6 @@
-Vue.component('chart-multi-line-timeseries', {
+import { ChartPrefs, NumberFormatter, ChartVue } from "./charting.js";
+
+export default Vue.component('chart-multi-line-timeseries', {
     props: {
         chart_data: { type:Object, required:false }, /* TimeseriesData */
         width: { type:Number, default: ChartPrefs.default_width },
@@ -175,7 +177,7 @@ Vue.component('chart-multi-line-timeseries', {
                 const yvalue = this.yscale.invert(pointer[1]); // number
                 //const i = d3.bisectCenter(this.tsdata.dates, xvalue); // index
                 var i = d3.bisect(this.tsdata.dates, xvalue); // index
-                if (i > this.tsdata.dates.length) return;
+                if (i<0 || i > this.tsdata.dates.length) return;
                 i = Math.min(this.tsdata.dates.length-1, i);
                          
                 // closest series
@@ -190,7 +192,7 @@ Vue.component('chart-multi-line-timeseries', {
                     }
                 }
                 const s = this.tsdata.series[closest.sidx];
-                if (i>= s.values.length) {
+                if (i<0 || i>= s.values.length) {
                     dot.attr("display", "none");
                     return;
                 }
diff --git a/management/reporting/ui/chart-pie.js b/management/reporting/ui/chart-pie.js
index ef945415..83bb14b9 100644
--- a/management/reporting/ui/chart-pie.js
+++ b/management/reporting/ui/chart-pie.js
@@ -1,4 +1,7 @@
-Vue.component('chart-pie', {
+import { ChartPrefs, NumberFormatter, ChartVue } from "./charting.js";
+
+
+export default Vue.component('chart-pie', {
     /*
      * chart_data: [
      *   { name: 'name', value: value },
@@ -127,7 +130,7 @@ Vue.component('chart-pie', {
                 radius *= 0.7;
             else
                 radius *= 0.8;
-            arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
+            var arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
             
             svg.append("g")
                 .attr("stroke", "white")
diff --git a/management/reporting/ui/chart-stacked-bar-timeseries.js b/management/reporting/ui/chart-stacked-bar-timeseries.js
index bdac98e2..c31a7eb2 100644
--- a/management/reporting/ui/chart-stacked-bar-timeseries.js
+++ b/management/reporting/ui/chart-stacked-bar-timeseries.js
@@ -2,7 +2,10 @@
  stacked bar chart
 */
 
-Vue.component('chart-stacked-bar-timeseries', {
+import { ChartPrefs, NumberFormatter, ChartVue } from "./charting.js";
+
+
+export default Vue.component('chart-stacked-bar-timeseries', {
     props: {
         chart_data: { type:Object, required:false }, /* TimeseriesData */
         width: { type:Number, default: ChartPrefs.default_width },
diff --git a/management/reporting/ui/chart-table.js b/management/reporting/ui/chart-table.js
index 5b669c5e..00aa0366 100644
--- a/management/reporting/ui/chart-table.js
+++ b/management/reporting/ui/chart-table.js
@@ -1,4 +1,4 @@
-Vue.component('chart-table', {
+export default Vue.component('chart-table', {
     props: {
         items: Array,
         fields: Array,
diff --git a/management/reporting/ui/charting.js b/management/reporting/ui/charting.js
index 37a44753..bab22eab 100644
--- a/management/reporting/ui/charting.js
+++ b/management/reporting/ui/charting.js
@@ -1,5 +1,5 @@
 
-class ChartPrefs {
+export class ChartPrefs {
     static get colors() {
         // see: https://github.com/d3/d3-scale-chromatic
         return d3.schemeSet2;
@@ -40,7 +40,7 @@ class ChartPrefs {
 };
 
 
-class DateFormatter {
+export class DateFormatter {
     /*
      * date and time
      */
@@ -162,7 +162,7 @@ class DateFormatter {
 };
 
 
-class DateRange {
+export class DateRange {
     /*
      * ranges
      */
@@ -241,7 +241,7 @@ class DateRange {
 };
 
 
-class NumberFormatter {
+export class NumberFormatter {
     static format(v) {
         return isNaN(v) || v===null ? "N/A" : v.toLocaleString(ChartPrefs.locales);
     }
@@ -319,7 +319,7 @@ class NumberFormatter {
 });
 
 
-class BvTable {
+export class BvTable {
     constructor(data, opt) {
         opt = opt || {};
         Object.assign(this, data);
@@ -446,7 +446,7 @@ class BvTable {
 };
 
 
-class BvTableField {
+export class BvTableField {
     constructor(field, field_type) {
         // this:
         //    key    - required
@@ -628,7 +628,7 @@ class BvTableField {
 };
 
 
-class MailBvTable extends BvTable {
+export class MailBvTable extends BvTable {
     flag(key, fn) {
         var field = this.get_field(key, true);
         if (!field) return;
@@ -736,7 +736,7 @@ class MailBvTable extends BvTable {
 }
 
 
-class ChartVue {
+export class ChartVue {
     
     static svg_attrs(viewBox) {
         var attrs = {
@@ -818,7 +818,7 @@ class ChartVue {
  * }
  */    
 
-class TimeseriesData {
+export class TimeseriesData {
     constructor(data) {
         Object.assign(this, data);
         this.convert_dates();
@@ -984,7 +984,7 @@ class TimeseriesData {
 };
 
 
-class ConnectionDisposition {
+export class ConnectionDisposition {
     constructor(disposition) {
         const data = {
             'failed_login_attempt': {
diff --git a/management/reporting/ui/date-range-picker.js b/management/reporting/ui/date-range-picker.js
index 720c5f39..7bb542e8 100644
--- a/management/reporting/ui/date-range-picker.js
+++ b/management/reporting/ui/date-range-picker.js
@@ -1,4 +1,7 @@
-Vue.component('date-range-picker', {
+import { DateRange, DateFormatter } from "./charting.js";
+
+
+export default Vue.component('date-range-picker', {
     props: {
         start_range: [ String, Array ],  // "ytd", "mtd", "wtd", or [start, end] where start and end are strings in format YYYY-MM-DD in localti
         recall_id: String, // save / recall from localStorage
diff --git a/management/reporting/ui/index.html b/management/reporting/ui/index.html
index 64729dd7..150fd92a 100644
--- a/management/reporting/ui/index.html
+++ b/management/reporting/ui/index.html
@@ -22,34 +22,10 @@
     <script src="https://d3js.org/d3.v6.min.js"></script>
 
     <script>axios.defaults.baseURL="/admin"</script>
-
-    <!-- our code -->
-    <script src="ui-common/exceptions.js"></script>
-    <script src="ui-common/authentication.js"></script>
-    <script src="ui-common/page-layout.js"></script>
-    <script src="ui-common/page-header.js"></script>
-    <script src="reports/ui/settings.js"></script>
-    <script src="reports/ui/capture-db-stats.js"></script>
-    <script src="reports/ui/charting.js"></script>
-    <script src="reports/ui/wbr-text.js"></script>
-    <script src="reports/ui/date-range-picker.js"></script>
-    <script src="reports/ui/chart-pie.js"></script>
-    <script src="reports/ui/chart-table.js"></script>
-    <script src="reports/ui/chart-stacked-bar-timeseries.js"></script>
-    <script src="reports/ui/chart-multi-line-timeseries.js"></script>
-    <script src="reports/ui/panel-messages-sent.js"></script>
-    <script src="reports/ui/panel-messages-received.js"></script>
-    <script src="reports/ui/panel-flagged-connections.js"></script>
-    <script src="reports/ui/panel-user-activity.js"></script>
-    <script src="reports/ui/panel-remote-sender-activity.js"></script>
-
-    <script src="reports/ui/reports-page-header.js"></script>
-    <script src="reports/ui/page-settings.js"></script>
-    <script src="reports/ui/page-reports-main.js"></script>
-    <script src="reports/ui/index.js"></script>
+    <script src="reports/ui/index.js" type="module"></script>
   </head>
     
-  <body onload="init_app()">
+  <body>
 
     <router-view id="app"></router-view>
     
diff --git a/management/reporting/ui/index.js b/management/reporting/ui/index.js
index d47061fb..3d47489f 100644
--- a/management/reporting/ui/index.js
+++ b/management/reporting/ui/index.js
@@ -2,14 +2,19 @@
  * reports index page
  */ 
 
+import page_settings from "./page-settings.js";
+import page_reports_main from "./page-reports-main.js";
+import { Me, init_authentication_interceptors } from "../../ui-common/authentication.js";
+import { AuthenticationError } from "../../ui-common/exceptions.js";
+import UserSettings from "./settings.js";
 
 
 const app = {
     router: new VueRouter({
         routes: [
-            { path: '/', component: Vue.component('page-reports-main') },
-            { path: '/settings', component: Vue.component('page-settings') },
-            { path: '/:panel', component: Vue.component('page-reports-main') },
+            { path: '/', component: page_reports_main },
+            { path: '/settings', component: page_settings },
+            { path: '/:panel', component: page_reports_main },
         ],
         scrollBehavior: function(to, from, savedPosition) {
             if (savedPosition) {
@@ -19,8 +24,8 @@ const app = {
     }),
     
     components: {
-        'page-settings': Vue.component('page-settings'),
-        'page-reports-main': Vue.component('page-reports-main'),
+        'page-settings': page_settings,
+        'page-reports-main': page_reports_main,
     },
         
     data: {
@@ -64,12 +69,12 @@ const app = {
 
 
 
-function init_app() {
-    init_axios_interceptors();
+
+init_authentication_interceptors();
     
-    UserSettings.load().then(settings => {
-        new Vue(app).$mount('#app');
-    }).catch(error => {
-        alert('' + error);
-    });
-}
+UserSettings.load().then(settings => {
+    new Vue(app).$mount('#app');
+}).catch(error => {
+    alert('' + error);
+});
+
diff --git a/management/reporting/ui/page-reports-main.js b/management/reporting/ui/page-reports-main.js
index d9d52707..a26059c0 100644
--- a/management/reporting/ui/page-reports-main.js
+++ b/management/reporting/ui/page-reports-main.js
@@ -1,16 +1,31 @@
-Vue.component('page-reports-main', function(resolve, reject) {
+import page_layout from '../../ui-common/page-layout.js';
+import reports_page_header from './reports-page-header.js';
+import date_range_picker from './date-range-picker.js';
+import capture_db_stats from './capture-db-stats.js';
+import panel_messages_sent from './panel-messages-sent.js';
+import panel_messages_received from './panel-messages-received.js';
+import panel_flagged_connections from './panel-flagged-connections.js';
+import panel_user_activity from './panel-user-activity.js';
+import panel_remote_sender_activity from './panel-remote-sender-activity.js';
+
+import { TimeseriesData } from './charting.js';
+
+
+export default Vue.component('page-reports-main', function(resolve, reject) {
     axios.get('reports/ui/page-reports-main.html').then((response) => { resolve({
 
         template: response.data,
 
         components: {
-            'page-layout': Vue.component('page-layout'),
-            'reports-page-header': Vue.component('reports-page-header'),
-            'date-range-picker': Vue.component('date-range-picker'),
-            'panel-messages-sent': Vue.component('panel-messages-sent'),
-            'panel-messages-received': Vue.component('panel-messages-received'),
-            'panel-flagged-connections': Vue.component('panel-flagged-connections'),
-            'panel-user-activity': Vue.component('panel-user-activity'),
+            'page-layout': page_layout,
+            'reports-page-header': reports_page_header,
+            'date-range-picker': date_range_picker,
+            'capture-db-stats': capture_db_stats,
+            'panel-messages-sent': panel_messages_sent,
+            'panel-messages-received': panel_messages_received,
+            'panel-flagged-connections': panel_flagged_connections,
+            'panel-user-activity': panel_user_activity,
+            'panel-remote-sender-activity': panel_remote_sender_activity,
         },
         
         data: function() {
diff --git a/management/reporting/ui/page-settings.js b/management/reporting/ui/page-settings.js
index 93de87b6..d2936038 100644
--- a/management/reporting/ui/page-settings.js
+++ b/management/reporting/ui/page-settings.js
@@ -1,11 +1,18 @@
-Vue.component('page-settings', function(resolve, reject) {
+
+import page_layout from '../../ui-common/page-layout.js';
+import reports_page_header from './reports-page-header.js';
+import UserSettings from "./settings.js";
+import { CaptureConfig } from "./settings.js";
+
+
+export default Vue.component('page-settings', function(resolve, reject) {
     axios.get('reports/ui/page-settings.html').then((response) => { resolve({
 
         template: response.data,
 
         components: {
-            'page-layout': Vue.component('page-layout'),
-            'reports-page-header': Vue.component('reports-page-header'),
+            'page-layout': page_layout,
+            'reports-page-header': reports_page_header,
         },
 
         data: function() {
diff --git a/management/reporting/ui/panel-flagged-connections.js b/management/reporting/ui/panel-flagged-connections.js
index 8621ca44..9d262220 100644
--- a/management/reporting/ui/panel-flagged-connections.js
+++ b/management/reporting/ui/panel-flagged-connections.js
@@ -1,4 +1,13 @@
-Vue.component('panel-flagged-connections', function(resolve, reject) {
+
+import chart_multi_line_timeseries from "./chart-multi-line-timeseries.js";
+import chart_stacked_bar_timeseries from "./chart-stacked-bar-timeseries.js";
+import chart_pie from "./chart-pie.js";
+import chart_table from "./chart-table.js";
+
+import { ChartPrefs, TimeseriesData, BvTable, ConnectionDisposition } from "./charting.js";
+
+
+export default Vue.component('panel-flagged-connections', function(resolve, reject) {
     axios.get('reports/ui/panel-flagged-connections.html').then((response) => { resolve({
 
         template: response.data,
@@ -14,10 +23,10 @@ Vue.component('panel-flagged-connections', function(resolve, reject) {
         },
 
         components: {
-            'chart-multi-line-timeseries': Vue.component('chart-multi-line-timeseries'),
-            'chart-stacked-bar-timeseries': Vue.component('chart-stacked-bar-timeseries'),
-            'chart-pie': Vue.component('chart-pie'),
-            'chart-table': Vue.component('chart-table'),
+            'chart-multi-line-timeseries': chart_multi_line_timeseries,
+            'chart-stacked-bar-timeseries': chart_stacked_bar_timeseries,
+            'chart-pie': chart_pie,
+            'chart-table': chart_table,
         },
 
         computed: {
diff --git a/management/reporting/ui/panel-messages-received.js b/management/reporting/ui/panel-messages-received.js
index 3be49f17..34e737b3 100644
--- a/management/reporting/ui/panel-messages-received.js
+++ b/management/reporting/ui/panel-messages-received.js
@@ -3,7 +3,13 @@
 
 */
 
-Vue.component('panel-messages-received', function(resolve, reject) {
+import chart_multi_line_timeseries from "./chart-multi-line-timeseries.js";
+import chart_table from "./chart-table.js";
+
+import { ChartPrefs, TimeseriesData, BvTable } from "./charting.js";
+
+
+export default Vue.component('panel-messages-received', function(resolve, reject) {
     axios.get('reports/ui/panel-messages-received.html').then((response) => { resolve({
 
         template: response.data,
@@ -19,10 +25,8 @@ Vue.component('panel-messages-received', function(resolve, reject) {
         },
 
         components: {
-            'chart-multi-line-timeseries': Vue.component('chart-multi-line-timeseries'),
-            // 'chart-stacked-bar-timeseries': Vue.component('chart-stacked-bar-timeseries'),
-            // 'chart-pie': Vue.component('chart-pie'),
-            'chart-table': Vue.component('chart-table'),
+            'chart-multi-line-timeseries': chart_multi_line_timeseries,
+            'chart-table': chart_table,
         },
         
         data: function() {
diff --git a/management/reporting/ui/panel-messages-sent.js b/management/reporting/ui/panel-messages-sent.js
index 18248d86..72965ccd 100644
--- a/management/reporting/ui/panel-messages-sent.js
+++ b/management/reporting/ui/panel-messages-sent.js
@@ -9,7 +9,15 @@
      'loading'    event=number
 */
 
-Vue.component('panel-messages-sent', function(resolve, reject) {
+import chart_multi_line_timeseries from "./chart-multi-line-timeseries.js";
+import chart_stacked_bar_timeseries from "./chart-stacked-bar-timeseries.js";
+import chart_pie from "./chart-pie.js";
+import chart_table from "./chart-table.js";
+
+import { ChartPrefs, TimeseriesData, BvTable } from "./charting.js";
+
+
+export default Vue.component('panel-messages-sent', function(resolve, reject) {
     axios.get('reports/ui/panel-messages-sent.html').then((response) => { resolve({
 
         template: response.data,
@@ -27,10 +35,10 @@ Vue.component('panel-messages-sent', function(resolve, reject) {
         },
 
         components: {
-            'chart-multi-line-timeseries': Vue.component('chart-multi-line-timeseries'),
-            'chart-stacked-bar-timeseries': Vue.component('chart-stacked-bar-timeseries'),
-            'chart-pie': Vue.component('chart-pie'),
-            'chart-table': Vue.component('chart-table'),
+            'chart-multi-line-timeseries': chart_multi_line_timeseries,
+            'chart-stacked-bar-timeseries': chart_stacked_bar_timeseries,
+            'chart-pie': chart_pie,
+            'chart-table': chart_table,
         },
         
         data: function() {
diff --git a/management/reporting/ui/panel-remote-sender-activity.js b/management/reporting/ui/panel-remote-sender-activity.js
index f4a795d0..a9467092 100644
--- a/management/reporting/ui/panel-remote-sender-activity.js
+++ b/management/reporting/ui/panel-remote-sender-activity.js
@@ -2,7 +2,11 @@
   details on the activity of a remote sender (envelope from)
 */
 
-Vue.component('panel-remote-sender-activity', function(resolve, reject) {
+import UserSettings from "./settings.js";
+import { MailBvTable, ConnectionDisposition } from "./charting.js";
+
+
+export default Vue.component('panel-remote-sender-activity', function(resolve, reject) {
     axios.get('reports/ui/panel-remote-sender-activity.html').then((response) => { resolve({
 
         template: response.data,
diff --git a/management/reporting/ui/panel-user-activity.js b/management/reporting/ui/panel-user-activity.js
index 7542b523..386f0311 100644
--- a/management/reporting/ui/panel-user-activity.js
+++ b/management/reporting/ui/panel-user-activity.js
@@ -2,7 +2,12 @@
   details on the activity of a user
 */
 
-Vue.component('panel-user-activity', function(resolve, reject) {
+import wbr_text from "./wbr-text.js";
+import UserSettings from "./settings.js";
+import { MailBvTable, ConnectionDisposition } from "./charting.js";
+
+
+export default Vue.component('panel-user-activity', function(resolve, reject) {
     axios.get('reports/ui/panel-user-activity.html').then((response) => { resolve({
 
         template: response.data,
@@ -12,7 +17,7 @@ Vue.component('panel-user-activity', function(resolve, reject) {
         },
 
         components: {
-            'wbr-text': Vue.component('wbr-text'),
+            'wbr-text': wbr_text,
         },
         
         data: function() {
diff --git a/management/reporting/ui/reports-page-header.js b/management/reporting/ui/reports-page-header.js
index 538b6fc6..2780387f 100644
--- a/management/reporting/ui/reports-page-header.js
+++ b/management/reporting/ui/reports-page-header.js
@@ -1,10 +1,12 @@
-Vue.component('reports-page-header', {
+import page_header from '../../ui-common/page-header.js';
+
+export default Vue.component('reports-page-header', {
     props: {
         loading_counter: { type:Number, required:true },
     },
     
     components: {
-        'page-header': Vue.component('page-header'),
+        'page-header': page_header,
     },
     
     template:
diff --git a/management/reporting/ui/settings.js b/management/reporting/ui/settings.js
index 297e7d57..d543d473 100644
--- a/management/reporting/ui/settings.js
+++ b/management/reporting/ui/settings.js
@@ -1,6 +1,9 @@
+import { ValueError } from '../../ui-common/exceptions.js';
+
+
 window.miabldap = window.miabldap || {};
 
-class CaptureConfig {
+export class CaptureConfig {
     static get() {
         return axios.get('/reports/capture/config').then(response => {
             var cc = new CaptureConfig();
@@ -11,7 +14,7 @@ class CaptureConfig {
 };
 
 
-class UserSettings {
+export default class UserSettings {
     static load() {
         if (window.miabldap.user_settings) {
             return Promise.resolve(window.miabldap.user_settings);
diff --git a/management/reporting/ui/wbr-text.js b/management/reporting/ui/wbr-text.js
index e661681a..6727d035 100644
--- a/management/reporting/ui/wbr-text.js
+++ b/management/reporting/ui/wbr-text.js
@@ -11,7 +11,7 @@
  * browser to wrap at any character of the text.
  */
 
-Vue.component('wbr-text', {
+export default Vue.component('wbr-text', {
     props: {
         text: { type:String, required: true },
         break_chars: { type:String, default:'@_.,:+=' },
diff --git a/management/ui-common/authentication.js b/management/ui-common/authentication.js
index 90dbeb7d..df38b1da 100644
--- a/management/ui-common/authentication.js
+++ b/management/ui-common/authentication.js
@@ -1,4 +1,4 @@
-class Me {
+export class Me {
     /* construct with return value from GET /me */
     constructor(me) {
         Object.assign(this, me);
@@ -18,7 +18,7 @@ class Me {
  * axios interceptors for authentication
  */
 
-function init_axios_interceptors() {
+export function init_authentication_interceptors() {
 
     // requests: attach non-session based auth (admin panel)
     axios.interceptors.request.use(request => {
@@ -38,7 +38,8 @@ function init_axios_interceptors() {
     });
 
 
-    // reponses: redirect on authorization failure
+    // reponses: handle authorization failures by throwing exceptions
+    // users should catch AuthenticationError exceptions
     axios.interceptors.response.use(
         response => {
             if (response.data &&
diff --git a/management/ui-common/exceptions.js b/management/ui-common/exceptions.js
index 2ff8588d..c4396c73 100644
--- a/management/ui-common/exceptions.js
+++ b/management/ui-common/exceptions.js
@@ -1,13 +1,13 @@
-class ValueError extends Error {
+export class ValueError extends Error {
     constructor(msg) {
         super(msg);
     }
 };
 
-class AssertionError extends Error {
+export class AssertionError extends Error {
 }
 
-class AuthenticationError extends Error {
+export class AuthenticationError extends Error {
     constructor(caused_by_error, msg, response) {
         super(msg);
         this.caused_by = caused_by_error;
diff --git a/management/ui-common/page-header.js b/management/ui-common/page-header.js
index 2374cb0d..a1b9a19e 100644
--- a/management/ui-common/page-header.js
+++ b/management/ui-common/page-header.js
@@ -1,8 +1,8 @@
-Vue.component('spinner', {
+var spinner = Vue.component('spinner', {
     template: '<span class="spinner-border spinner-border-sm"></span>'
 });
 
-Vue.component('page-header', function(resolve, reject) {
+var header = Vue.component('page-header', function(resolve, reject) {
     axios.get('ui-common/page-header.html').then((response) => { resolve({
 
         props: {
@@ -17,3 +17,5 @@ Vue.component('page-header', function(resolve, reject) {
     });
 
 });
+
+export { spinner, header as default };
diff --git a/management/ui-common/page-layout.js b/management/ui-common/page-layout.js
index 7af06a39..974edc97 100644
--- a/management/ui-common/page-layout.js
+++ b/management/ui-common/page-layout.js
@@ -1,4 +1,4 @@
-Vue.component('page-layout', function(resolve, reject) {
+export default Vue.component('page-layout', function(resolve, reject) {
     axios.get('ui-common/page-layout.html').then((response) => { resolve({
 
         template: response.data,