Switch to ES6 modules

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";
 
-
+export default Vue.component('capture-db-stats', {
-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>'+

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;
                 }

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")

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 },

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,

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': {

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

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>
-
+    <script src="reports/ui/index.js" type="module"></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>
   </head>
     
-  <body onload="init_app()">
+  <body>
 
     <router-view id="app"></router-view>
     

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: '/', component: page_reports_main },
-            { path: '/settings', component: Vue.component('page-settings') },
+            { path: '/settings', component: page_settings },
-            { path: '/:panel', component: Vue.component('page-reports-main') },
+            { 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-settings': page_settings,
-        'page-reports-main': Vue.component('page-reports-main'),
+        '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 => {
+UserSettings.load().then(settings => {
-        new Vue(app).$mount('#app');
+    new Vue(app).$mount('#app');
-    }).catch(error => {
+}).catch(error => {
-        alert('' + error);
+    alert('' + error);
-    });
+});
-}
+

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'),
+            'page-layout': page_layout,
-            'reports-page-header': Vue.component('reports-page-header'),
+            'reports-page-header': reports_page_header,
-            'date-range-picker': Vue.component('date-range-picker'),
+            'date-range-picker': date_range_picker,
-            'panel-messages-sent': Vue.component('panel-messages-sent'),
+            'capture-db-stats': capture_db_stats,
-            'panel-messages-received': Vue.component('panel-messages-received'),
+            'panel-messages-sent': panel_messages_sent,
-            'panel-flagged-connections': Vue.component('panel-flagged-connections'),
+            'panel-messages-received': panel_messages_received,
-            'panel-user-activity': Vue.component('panel-user-activity'),
+            'panel-flagged-connections': panel_flagged_connections,
+            'panel-user-activity': panel_user_activity,
+            'panel-remote-sender-activity': panel_remote_sender_activity,
         },
         
         data: function() {

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'),
+            'page-layout': page_layout,
-            'reports-page-header': Vue.component('reports-page-header'),
+            'reports-page-header': reports_page_header,
         },
 
         data: function() {

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-multi-line-timeseries': chart_multi_line_timeseries,
-            'chart-stacked-bar-timeseries': Vue.component('chart-stacked-bar-timeseries'),
+            'chart-stacked-bar-timeseries': chart_stacked_bar_timeseries,
-            'chart-pie': Vue.component('chart-pie'),
+            'chart-pie': chart_pie,
-            'chart-table': Vue.component('chart-table'),
+            'chart-table': chart_table,
         },
 
         computed: {

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-multi-line-timeseries': chart_multi_line_timeseries,
-            // 'chart-stacked-bar-timeseries': Vue.component('chart-stacked-bar-timeseries'),
+            'chart-table': chart_table,
-            // 'chart-pie': Vue.component('chart-pie'),
-            'chart-table': Vue.component('chart-table'),
         },
         
         data: function() {

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-multi-line-timeseries': chart_multi_line_timeseries,
-            'chart-stacked-bar-timeseries': Vue.component('chart-stacked-bar-timeseries'),
+            'chart-stacked-bar-timeseries': chart_stacked_bar_timeseries,
-            'chart-pie': Vue.component('chart-pie'),
+            'chart-pie': chart_pie,
-            'chart-table': Vue.component('chart-table'),
+            'chart-table': chart_table,
         },
         
         data: function() {

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,

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() {

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:

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);

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:'@_.,:+=' },

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 &&

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;

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 };

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,