Merge pull request #31 from Microsoft/stream

Streaming support for #5

Author: octref

src/logParser/jsonLogParser.ts

@@ -0,0 +1,31 @@
+import { LspItem, MsgKind } from '@/logParser/rawLogParser'
+
+const HEADER_LENGTH = 21
+
+const idToRequests = {}
+
+export function parseJSONLog(log: string): LspItem {
+  const item = JSON.parse(log.slice(HEADER_LENGTH))
+
+  if (item.message.id && item.type.startsWith('send')) {
+    idToRequests[item.message.id] = item
+  }
+
+  return {
+    msg: item.message.method,
+    msgId: item.message.id,
+    msgKind: convertMsgType(item.type) as MsgKind,
+    msgType: item.message.method
+      ? item.message.method
+      : idToRequests[item.message.id].message.method,
+    msgLatency: item.type === 'receive-response'
+      ? `${item.timestamp - idToRequests[item.message.id].timestamp}ms`
+      : null,
+    arg: item.message,
+    time: new Date(item.timestamp).toLocaleTimeString(),
+  }
+}
+
+function convertMsgType(msgType: string) {
+  return msgType.startsWith('receive') ? msgType.replace('receive', 'recv') : msgType
+}

src/logParser/rawLogParser.ts

@@ -11,8 +11,8 @@ export interface LspItem {
   msg: string
   msgKind: MsgKind
   msgType: string
-  msgId: string
-  msgLatency: string
+  msgId?: string
+  msgLatency?: string
   arg: any
 }
 

src/store/store.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { parseLSPLog, LspItem, MsgKind } from '@/logParser/rawLogParser'
+import { parseJSONLog } from '@/logParser/jsonLogParser';
 
 Vue.use(Vuex)
 
@@ -36,6 +37,11 @@ export interface State {
   showUsage: boolean
 }
 
+const emptyLog = {
+  name: 'stream',
+  items: []
+}
+
 const sampleLogItems: LspItem[] = require('./sample.log.json')
 const sampleLog = {
   name: 'sample.log',
@@ -49,7 +55,7 @@ const sampleCSSLog = {
 }
 
 const defaultState: State = {
-  logs: [sampleLog, sampleCSSLog],
+  logs: [emptyLog, sampleLog, sampleCSSLog],
   activeLogIndex: 0,
 
   nameQuery: '',
@@ -63,7 +69,7 @@ const defaultState: State = {
   showUsage: false
 }
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: defaultState,
   mutations: {
     updateActiveLog(state, i) {
@@ -75,6 +81,10 @@ export default new Vuex.Store({
         name
       })
     },
+    appendLog(state, logItem: string) {
+      const activeLog = state.logs[state.activeLogIndex]
+      activeLog.items.push(parseJSONLog(logItem))
+    },
     search(state, { nameQuery, paramQuery }) {
       state.nameQuery = nameQuery
       state.paramQuery = paramQuery
@@ -212,3 +222,15 @@ function itemMatchesKindFilter(item: LspItem, filter: KindFilter) {
   }
   return item.msgKind === filter
 }
+
+(window as any).appendLog = (log) => {
+  store.commit('appendLog', log)
+}
+
+window.addEventListener('message', ev => {
+  store.commit('appendLog', ev.data)
+  const el = document.querySelector('.msg:last-child')
+  el.scrollIntoView({ block: 'start', behavior: 'smooth' })
+})
+
+export default store