Log events

.eslintrc.js

@@ -64,6 +64,7 @@ module.exports = {
     'arrow-body-style': 'off',
     'object-curly-newline': 'warn',
     'semi': productionError,
+    'no-return-assign': 'off'
   },
 
   overrides: [

package.json

@@ -28,7 +28,7 @@
     "@brafdlog/israeli-bank-scrapers-core": "^0.9.2",
     "@getstation/electron-google-oauth2": "2.1.0",
     "@sentry/electron": "^1.3.0",
-    "@vue/composition-api": "^1.0.0-beta.11",
+    "@vue/composition-api": "^1.0.0-beta.14",
     "core-js": "^3.4.4",
     "direct-vuex": "^0.12.0",
     "download-chromium": "^2.2.0",

src/components/app/LogsEventEmitter.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '@/originalBudgetTrackingApp';
+import { EventNames } from '@/originalBudgetTrackingApp/eventEmitters/EventEmitter';
+import { Levels, LogEntry } from '../shared/log/types';
+
+export default (callback: (entry: LogEntry) => void) => {
+  const eventPublisher = new EventEmitter.BudgetTrackingEventEmitter();
+
+  eventPublisher.onAny((eventName, data) => {
+    const message = data?.message || eventName;
+
+    switch (eventName) {
+      case EventNames.GENERAL_ERROR:
+      case EventNames.IMPORTER_ERROR:
+        return callback({ message, level: Levels.Error });
+      default:
+        return callback({ message, level: Levels.Info });
+    }
+  });
+
+  return eventPublisher;
+};

src/components/app/MainContent.vue

@@ -3,68 +3,62 @@
     <div class="d-flex justify-center align-center">
       <v-btn
         x-large
-        :loading="scraping"
+        :loading="inProgress"
         :color="btnColor"
         @click="scrape"
       >
         Run
       </v-btn>
     </div>
-    <div>
-      <log-lines :entries="results" />
+    <div class="keep-bottom">
+      <log-viewer :entries="entries" />
     </div>
     <div>
       <config-editor />
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import LogViewer from '@/components/shared/log/LogViewer.vue';
+import Vue from 'vue';
+import { ref, computed } from '@vue/composition-api';
 import { scrapeAndUpdateOutputVendors } from '@/originalBudgetTrackingApp';
-import LogLines from '@/components/shared/LogLines';
-import ConfigEditor from './ConfigEditor';
+import ConfigEditor from './ConfigEditor.vue';
+import { LogEntry } from '../shared/log/types';
+import LogsEventEmitter from './LogsEventEmitter';
 
-const colors = {
-  true: 'green',
-  false: 'red',
-  null: null
+const statusToColor = {
+  NOT_STARTED: null,
+  IN_PROGRESS: null,
+  SUCCESS: 'green',
+  FAILURE: 'red'
 };
 
-export default {
-  name: 'MainContent',
+export default Vue.extend({
   components: {
-    LogLines, ConfigEditor
+    LogViewer, ConfigEditor
   },
-  data() {
+  setup() {
+    const scrapingStatus = ref('NOT_STARTED' as keyof typeof statusToColor);
+    const inProgress = computed(() => scrapingStatus.value === 'IN_PROGRESS');
+    const btnColor = computed(() => statusToColor[scrapingStatus.value]);
+    const entries = ref([] as LogEntry[]);
+
+    const eventPublisher = LogsEventEmitter((entry) => entries.value.push(entry));
+
+    const scrape = () => {
+      scrapingStatus.value = 'IN_PROGRESS';
+      scrapeAndUpdateOutputVendors(eventPublisher)
+        .then(() => scrapingStatus.value = 'SUCCESS')
+        .catch(() => scrapingStatus.value = 'FAILURE');
+    };
+
     return {
-      scraping: false,
-      results: '',
-      succeeded: null,
+      inProgress, btnColor, scrape, entries
     };
   },
-  computed: {
-    btnColor() {
-      return colors[this.succeeded];
-    }
-  },
-  methods: {
-    async scrape() {
-      this.scraping = true;
-      scrapeAndUpdateOutputVendors()
-        .then((results) => {
-          this.results = results;
-          this.succeeded = true;
-        })
-        .catch((error) => {
-          this.results = error.message;
-          this.succeeded = false;
-        })
-        .finally(() => {
-          this.scraping = false;
-        });
-    }
-  }
-};
+});
 </script>
 
 <style scoped>
@@ -79,6 +73,12 @@ export default {
 
 .container > div {
   flex: 1 1 0;
+  overflow: auto;
+}
+
+.container > .keep-bottom {
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 </style>

src/components/shared/log/LogViewer.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="logs-container">
+    <p
+      v-for="(entry, i) in entries"
+      :key="i"
+      :class="getClass(entry.level)"
+    >
+      {{ entry.message }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import { LogEntry, Levels } from './types';
+
+const levelToClass = {
+  [Levels.Error]: 'error-line',
+  [Levels.Warn]: 'warn-line',
+  [Levels.Info]: 'info-line'
+};
+
+export default Vue.extend({
+  props: {
+    entries: {
+      type: Array as PropType<LogEntry[]>,
+      required: true
+    },
+  },
+  setup() {
+    const getClass = (level: Levels) => levelToClass[level];
+
+    return { getClass };
+  }
+});
+</script>
+
+<style scoped>
+.logs-container {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  white-space: pre-line;
+  color: rgba(0, 0, 0, 0.6);
+  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 25px;
+  padding-left: 5px;
+}
+
+.logs-container > p {
+  margin-bottom: 0px;
+  border-bottom: solid 1px #80808038;
+}
+
+.logs-container .error-line {
+  color: rgb(240, 0, 0);
+}
+
+.logs-container .warn-line {
+  color: rgb(225, 125, 50);
+}
+
+.logs-container .info-line {
+  color: rgb(0, 125, 60);
+}
+</style>

src/components/shared/log/types.ts

@@ -0,0 +1,8 @@
+export enum Levels {
+    Error, Warn, Info
+}
+
+export type LogEntry = {
+    level: Levels
+    message: string
+}

src/originalBudgetTrackingApp/eventEmitters/EventEmitter.ts

@@ -19,14 +19,14 @@ export enum EventNames {
   LOG = 'LOG'
 }
 
-interface ErrorEvent {
-  error: Error
-}
-
 interface BudgetTrackingEvent {
   message?: string;
 }
 
+export interface ErrorEvent extends BudgetTrackingEvent {
+  error: Error
+}
+
 interface ImporterEvent extends BudgetTrackingEvent {
   id: string
   name: string
@@ -53,14 +53,14 @@ interface ImportProcessStartEvent extends BudgetTrackingEvent {
   startDate: Date
 }
 
-type EventDataMap = {
+export type EventDataMap = {
   [EventNames.IMPORT_PROCESS_START]: ImportProcessStartEvent
   [EventNames.IMPORTER_START]: ImporterEvent
   [EventNames.IMPORTER_PROGRESS]: ImporterEvent
   [EventNames.IMPORTER_ERROR]: ImporterErrorEvent
   [EventNames.IMPORTER_END]: ImporterEndEvent
-  [EventNames.IMPORT_PROCESS_END]: { }
-  [EventNames.EXPORT_PROCESS_START]: { }
+  [EventNames.IMPORT_PROCESS_END]: BudgetTrackingEvent
+  [EventNames.EXPORT_PROCESS_START]: BudgetTrackingEvent
   [EventNames.EXPORTER_START]: ExporterEvent
   [EventNames.EXPORTER_PROGRESS]: ExporterEvent
   [EventNames.EXPORTER_ERROR]: ExporterErrorEvent
@@ -75,6 +75,6 @@ export class BudgetTrackingEventEmitter extends Emittery.Typed<EventDataMap, Emp
 
 }
 
-export type EventPublisher = Pick<BudgetTrackingEventEmitter, 'emit' | 'emitSerial'>
+export type EventPublisher = Pick<BudgetTrackingEventEmitter, 'emit'>
 
 export type EventSubscriber = Pick<BudgetTrackingEventEmitter, 'on' | 'once' | 'off' | 'onAny' | 'anyEvent' | 'offAny'>;

src/originalBudgetTrackingApp/index.ts

@@ -2,14 +2,17 @@ import { createTransactionsInExternalVendors } from '@/originalBudgetTrackingApp
 import { scrapeFinancialAccountsAndFetchTransactions } from '@/originalBudgetTrackingApp/import/importTransactions';
 import moment from 'moment';
 import * as configManager from './configManager/configManager';
-import { EventPublisher, EventNames } from './eventEmitters/EventEmitter';
+import { EventPublisher, EventNames, BudgetTrackingEventEmitter } from './eventEmitters/EventEmitter';
 import { buildConsoleEmitter } from './eventEmitters/consoleEmitter';
 import outputVendors from './export/outputVendors';
 import * as bankScraper from './import/bankScraper';
 
 export { printYnabAccountData } from './setupHelpers';
 export { outputVendors };
 export { configManager };
+export const EventEmitter = {
+  EventNames, BudgetTrackingEventEmitter
+};
 
 export const { inputVendors } = bankScraper;
 

yarn.lock

@@ -2122,10 +2122,10 @@
   optionalDependencies:
     prettier "^1.18.2"
 
-"@vue/composition-api@^1.0.0-beta.11":
-  version "1.0.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.0.0-beta.11.tgz#260e9d23d59078d7a6358fec53c77a9adc0cd5b5"
-  integrity sha512-WHwX8e1V2NxQtFn7DsgET3QKAfA8kIm13hT4lCdGMAtxbM1dZ/lczF4wdhmkKtKrZiv657aanXV+cgGFF71krg==
+"@vue/composition-api@^1.0.0-beta.14":
+  version "1.0.0-beta.14"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.0.0-beta.14.tgz#b243d906ae5dcda7483e0b5a2b5ea1aa971a4e00"
+  integrity sha512-HYBe87RG//qpN/2+ZtgdhrIafdO8bYK/Tu1+/jMS4iNGYJi42XCbPydhEAiaRcTvsEJjZQEfP+hKKIuH+iPICg==
   dependencies:
     tslib "^2.0.1"