Lint it all

.eslintrc.json

@@ -13,6 +13,8 @@
   "rules": {
     "prettier/prettier": "off",
     "vue/require-default-prop": "off",
+    "vue/prop-name-casing": "off",
+    "vue/name-property-casing": "off",
     "@typescript-eslint/camelcase": ["off"],
     "@typescript-eslint/explicit-function-return-type": ["off"],
     "@typescript-eslint/no-var-requires": ["off"],

package.json

@@ -11,7 +11,7 @@
     "test": "jest --rootDir=src",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint --no-fix-warnings",
+    "lint": "vue-cli-service lint",
     "lint_old": "eslint --ignore-path=.gitignore --ext .vue,.js,.ts ."
   },
   "devDependencies": {

src/components/ErrorBoundary.vue

@@ -16,7 +16,7 @@ export default {
   errorCaptured (err, vm, info) {
     //console.error("Error captured!");
     //console.error(err, vm, info);
-    let msg = (err.name && err.message) ? (err.name + ": " + err.message) : err;
+    const msg = (err.name && err.message) ? (err.name + ": " + err.message) : err;
     this.errors.push({
       msg: msg,
       time: new Date().toISOString(),

src/components/Header.vue

@@ -100,7 +100,7 @@ import 'vue-awesome/icons/desktop';
 import _ from 'lodash';
 
 // Set this to true to test Android behavior when on a desktop
-let testingAndroid = false;
+const testingAndroid = false;
 
 export default {
   name: 'Header',
@@ -112,8 +112,8 @@ export default {
     };
   },
   mounted: async function() {
-    let buckets = await this.$aw.getBuckets();
-    let types_by_host = {};
+    const buckets = await this.$aw.getBuckets();
+    const types_by_host = {};
     _.each(buckets, (v) => {
         types_by_host[v.hostname] = types_by_host[v.hostname] || {};
         // The '&& true;' is just to typecoerce into booleans

src/components/SummaryView.vue

@@ -43,8 +43,8 @@ export default {
 
   methods: {
     query: async function() {
-      var periods = [this.period];
-      var q = query.summaryQuery(this.windowBucketId, this.afkBucketId, this.limit);
+      const periods = [this.period];
+      const q = query.summaryQuery(this.windowBucketId, this.afkBucketId, this.limit);
       let data = await this.$aw.query(periods, q);
       console.log(data);
       data = data[0];

src/mixins/asyncErrorCaptured.js

@@ -8,20 +8,20 @@
 function handleError(error, vm, info) {
   let cur = vm;
   while ((cur = cur.$parent)) {
-    var hooks = cur.$options.errorCaptured || [];
-    for (let hook of hooks) if (hook.call(cur, error, vm, info) === false) break;
+    const hooks = cur.$options.errorCaptured || [];
+    for (const hook of hooks) if (hook.call(cur, error, vm, info) === false) break;
   }
 }
 
 export default {
   beforeCreate: function() {
-    var _self = this;
-    var methods = this.$options.methods || {};
+    const _self = this;
+    const methods = this.$options.methods || {};
     for (var key in methods) {
       var original = methods[key];
       methods[key] = function() {
         try {
-          var result = original.apply(this, arguments);
+          const result = original.apply(this, arguments);
           // let's analyse what is returned from the method
           if (result && typeof result.then === 'function' && typeof result.catch === 'function') {
             // this looks like a Promise. let's handle it's errors:

src/queries.js

@@ -12,7 +12,7 @@ function querystr_to_array(querystr) {
 export function summaryQuery(windowbucket, afkbucket, count) {
   windowbucket = windowbucket.replace('"', '\\"');
   afkbucket = afkbucket.replace('"', '\\"');
-  let code = `events  = flood(query_bucket("${windowbucket}"));
+  const code = `events  = flood(query_bucket("${windowbucket}"));
     not_afk = flood(query_bucket("${afkbucket}"));
     not_afk = filter_keyvals(not_afk, "status", ["not-afk"]);
     events  = filter_period_intersect(events, not_afk);
@@ -29,7 +29,7 @@ export function summaryQuery(windowbucket, afkbucket, count) {
 export function windowQuery(windowbucket, afkbucket, appcount, titlecount, filterAFK, classes) {
   windowbucket = windowbucket.replace('"', '\\"');
   afkbucket = afkbucket.replace('"', '\\"');
-  let code =
+  const code =
     `events  = flood(query_bucket("${windowbucket}"));
      not_afk = flood(query_bucket("${afkbucket}"));
      not_afk = filter_keyvals(not_afk, "status", ["not-afk"]);` +
@@ -51,7 +51,7 @@ export function windowQuery(windowbucket, afkbucket, appcount, titlecount, filte
 export function appQuery(appbucket, limit) {
   appbucket = appbucket.replace('"', '\\"');
   limit = limit || 5;
-  let code =
+  const code =
     `events  = query_bucket("${appbucket}");` +
     `events  = merge_events_by_keys(events, ["app"]);
     events  = sort_by_duration(events);
@@ -104,12 +104,12 @@ export function browserSummaryQuery(browserbuckets, windowbucket, afkbucket, lim
       : '');
 
   _.each(Object.keys(appnames), browserName => {
-    let bucketId = _.filter(browserbuckets, buckets => buckets.indexOf(browserName) !== -1)[0];
+    const bucketId = _.filter(browserbuckets, buckets => buckets.indexOf(browserName) !== -1)[0];
     if (bucketId === undefined) {
       // Skip browser if specific bucket not available
       return;
     }
-    let appnames_str = JSON.stringify(appnames[browserName]);
+    const appnames_str = JSON.stringify(appnames[browserName]);
     code +=
       `events_${browserName} = flood(query_bucket("${bucketId}"));
        window_${browserName} = filter_keyvals(window, "app", ${appnames_str});` +

src/route.js

@@ -23,7 +23,7 @@ const Dev = () => import('./views/Dev.vue');
 
 Vue.use(VueRouter);
 
-var router = new VueRouter({
+const router = new VueRouter({
   routes: [
     { path: '/', component: Home },
     {

src/util/awclient.js

@@ -5,12 +5,12 @@ let baseURL = "";
 // If running with `npm node dev`, use testing server as origin.
 // Works since CORS is enabled by default when running `aw-server --testing`.
 if(!PRODUCTION) {
-    let protocol = "http";
-    let hostname = "127.0.0.1";
-    let port = "5666";
+    const protocol = "http";
+    const hostname = "127.0.0.1";
+    const port = "5666";
     baseURL = protocol + "://" + hostname + ":" + port;
 }
 
-let awc = new AWClient("aw-webui", {testing: !PRODUCTION, baseURL});
+const awc = new AWClient("aw-webui", {testing: !PRODUCTION, baseURL});
 
 export default awc;

src/util/classes.ts

@@ -1,9 +1,9 @@
-let _ = require('lodash');
+const _ = require('lodash');
 
 const level_sep = ">";
 
 interface Category {
-    id?: number,
+    id?: number;
     name: string[];
     name_pretty?: string;
     subname?: string;
@@ -16,7 +16,7 @@ interface Category {
     children?: Category[];
 }
 
-export let defaultCategories: Category[] = [
+export const defaultCategories: Category[] = [
   { name: ['Work'], rule: { type: 'regex', pattern: 'Google Docs' } },
   {
     name: ['Work', 'Programming'],
@@ -35,27 +35,27 @@ export let defaultCategories: Category[] = [
 
 export function build_category_hierarchy(classes: Category[]): Category[] {
   function annotate(c: Category) {
-    let ch = c.name;
+    const ch = c.name;
     c.name_pretty = ch.join(level_sep);
     c.subname = ch.slice(-1)[0];
     c.parent = ch.length > 1 ? ch.slice(0, -1) : null;
     c.depth = ch.length - 1;
     return c;
   }
 
-  let new_classes = classes.slice().map(c => annotate(c));
+  const new_classes = classes.slice().map(c => annotate(c));
 
   // Insert dangling/undefined parents
-  let all_full_names = new Set(new_classes.map(c => c.name.join(level_sep)));
+  const all_full_names = new Set(new_classes.map(c => c.name.join(level_sep)));
 
   function createMissingParents(children) {
      children
         .map(c => c.parent)
         .filter(p => !!p)
         .map(p => {
-          let name = p.join(level_sep);
+          const name = p.join(level_sep);
           if (p && !all_full_names.has(name)) {
-            let new_parent = annotate({ name: p, rule: { type: null, pattern: '' } });
+            const new_parent = annotate({ name: p, rule: { type: null, pattern: '' } });
             classes.push(new_parent);
             all_full_names.add(name);
             // New parent might not be top-level, so we need to recurse
@@ -84,7 +84,7 @@ export function build_category_hierarchy(classes: Category[]): Category[] {
 export function flatten_category_hierarchy(hier: Category[]): Category[] {
   return _.flattenDeep(
     hier.map(h => {
-      let level = [h, flatten_category_hierarchy(h.children)];
+      const level = [h, flatten_category_hierarchy(h.children)];
       h.children = [];
       return level;
     })
@@ -102,7 +102,7 @@ export function saveClasses(classes: Category[]) {
 }
 
 export function loadClasses(): Category[] {
-  let classes_json = localStorage.classes;
+  const classes_json = localStorage.classes;
   if(classes_json && classes_json.length >= 1) {
     return JSON.parse(classes_json);
   } else {

src/util/color.js

@@ -8,12 +8,12 @@ const d3 = require("d3");
 // See here for examples:
 //   https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9
 
-let scale = d3.scaleOrdinal(['#90CAF9', '#FFE082', '#EF9A9A', '#A5D6A7']);
+const scale = d3.scaleOrdinal(['#90CAF9', '#FFE082', '#EF9A9A', '#A5D6A7']);
 
 // Needed to prewarm the color table
 scale.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
 
-let customColors = {
+const customColors = {
     "afk": "#EEE",
     "not-afk": "#7F6",
     "hibernating": "#DD6",
@@ -46,8 +46,8 @@ function hashcode(str){
     if (str.length === 0) {
       return hash;
     }
-    for (var i = 0; i < str.length; i++) {
-        var character = str.charCodeAt(i);
+    for (let i = 0; i < str.length; i++) {
+        const character = str.charCodeAt(i);
         hash = ((hash<<5)-hash)+character;
         hash = hash & hash; // Convert to 32bit integer
     }

src/util/time.js

@@ -2,20 +2,20 @@ import moment from 'moment';
 
 export function seconds_to_duration(seconds) {
   // Returns a human-readable duration string
-  var hrs = Math.floor(seconds / 60 / 60);
-  var min = Math.floor((seconds / 60) % 60);
-  var sec = Math.floor(seconds % 60);
-  let l = [];
+  const hrs = Math.floor(seconds / 60 / 60);
+  const min = Math.floor((seconds / 60) % 60);
+  const sec = Math.floor(seconds % 60);
+  const l = [];
   if (hrs != 0) l.push(hrs + 'h');
   if (min != 0) l.push(min + 'm');
   if (sec != 0 || l.length == 0) l.push(sec + 's');
   return l.join(' ');
 }
 
 export function friendlydate(timestamp) {
-  let now = moment();
-  let m = moment.parseZone(timestamp);
-  let sinceNow = moment.duration(m.diff(now));
+  const now = moment();
+  const m = moment.parseZone(timestamp);
+  const sinceNow = moment.duration(m.diff(now));
   if (-sinceNow.asSeconds() <= 60) {
     return `${Math.round(-sinceNow.asSeconds())}s ago`;
   } else if (-sinceNow.asSeconds() <= 60 * 60 * 24) {
@@ -25,10 +25,10 @@ export function friendlydate(timestamp) {
 }
 
 export function get_day_start_with_offset(dateParam) {
-  var dateMoment = dateParam ? moment(dateParam) : moment().startOf('day');
-  var start_of_day = localStorage.startOfDay;
-  var start_of_day_hours = parseInt(start_of_day.split(':')[0]);
-  var start_of_day_minutes = parseInt(start_of_day.split(':')[1]);
+  const dateMoment = dateParam ? moment(dateParam) : moment().startOf('day');
+  const start_of_day = localStorage.startOfDay;
+  const start_of_day_hours = parseInt(start_of_day.split(':')[0]);
+  const start_of_day_minutes = parseInt(start_of_day.split(':')[1]);
   return dateMoment
     .hour(start_of_day_hours)
     .minute(start_of_day_minutes)
@@ -47,7 +47,7 @@ export function get_day_period(date) {
 
 export function get_day_start(datestr) {
   // Get start time of date
-  var datestart = moment(datestr);
+  const datestart = moment(datestr);
   datestart.set('hour', 0);
   datestart.set('minute', 0);
   datestart.set('second', 0);

src/util/tooltip.js

@@ -3,7 +3,7 @@ import { seconds_to_duration } from './time.js';
 import DOMPurify from 'dompurify';
 import _ from 'lodash';
 
-let sanitize = DOMPurify.sanitize;
+const sanitize = DOMPurify.sanitize;
 
 export function buildTooltip(bucket, e) {
   // WARNING: XSS risk, make sure to sanitize properly

src/views/Bucket.vue

@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     buckets() {
-      let bucket = this.bucket;
+      const bucket = this.bucket;
       bucket.events = this.events;
       return [bucket];
     }
@@ -57,6 +57,12 @@ export default {
       this.getEvents(this.id);
     }
   },
+  mounted: function() {
+    this.id = this.$route.params.id;
+    this.getBucketInfo(this.id);
+    this.getEvents(this.id);
+    this.getEventCount(this.id);
+  },
   methods: {
     getBucketInfo: async function(bucket_id) {
       this.bucket = await this.$aw.getBucketInfo(bucket_id);
@@ -75,11 +81,5 @@ export default {
       this.eventcount = (await this.$aw.countEvents(bucket_id)).data;
     },
   },
-  mounted: function() {
-    this.id = this.$route.params.id;
-    this.getBucketInfo(this.id);
-    this.getEvents(this.id);
-    this.getEventCount(this.id);
-  },
 }
 </script>

src/views/Buckets.vue

@@ -97,14 +97,14 @@ import _ from 'lodash';
 
 export default {
   name: "Buckets",
-  mounted: function() {
-    this.getBuckets();
-  },
   data: () => {
     return {
       buckets: [],
     }
   },
+  mounted: function() {
+    this.getBuckets();
+  },
   methods: {
     getBuckets: async function() {
       this.buckets = _.orderBy(await this.$aw.getBuckets(), [(b) => b.id], ["asc"]);

src/views/Log.vue

@@ -43,14 +43,14 @@ div
 <script>
 export default {
   name: "Log",
-  mounted: function() {
-    this.getLog();
-  },
   data: () => {
     return {
       logs: [],
     }
   },
+  mounted: function() {
+    this.getLog();
+  },
   methods: {
     getLog: function() {
       $Log.get().then((response) => {