upgrade run ui

frontend/src/views/RunsView.vue

@@ -2,10 +2,15 @@
   import { ref, onMounted, onUnmounted } from 'vue';
   import TitleBar from '../components/TitleBar.vue';
   import * as runs from '../runs';
+  import * as backend from '../backend';
 
   const runList = ref([]);
   const expandedRunId = ref(null);
-  const runListener = runs.addRunListener(onRunEvent);
+  const expandEvents = ref(false);
+  
+  let cancelCreateListener = null;
+  let runListener = runs.addRunListener(onRunEvent);
+  let streamCache = {};
 
   const toggleRun = (id) => {
     expandedRunId.value = expandedRunId.value == id ? null : id;
@@ -21,7 +26,7 @@
   };
 
   function onRunEvent (newRun) {
-    let run = runList.value.findOne(r => r.id == newRun.id);
+    let run = runList.value.find(r => r.id == newRun.id);
     Object.assign(run, newRun);
   }
 
@@ -30,10 +35,31 @@
       run => Object.assign({}, run)
     );
     runListener.setIdList(runList.value.map(r => r.id));
+    cancelCreateListener = runs.onCreated(run => {
+      runList.value.push(Object.assign({}, run));
+    });
   });
 
+  function isStreamEvent(event) {
+    return typeof event.data == "object" && event.data.streamId != null;
+  }
+
+  function getStreamRef(event) {
+    let streamId = event.data.streamId;
+    let refObject = streamCache[streamId];
+    if (refObject) return refObject;
+
+    refObject = ref("");
+    let stream = backend.readStream(streamId);
+    stream.on("data", chunk => refObject.value += chunk);
+
+    streamCache[streamId] = refObject;
+    return refObject;
+  }
+
   onUnmounted(() => {
     runListener.setIdList([]);
+    cancelCreateListener();
   });
 </script>
 
@@ -75,9 +101,13 @@
           <div class="detail-key">Input</div>
           <pre class="detail-pre">{{ JSON.stringify(run.input, null, 2) }}</pre>
         </div>
-        <div v-if="run.events && run.events.length > 0" class="detail-row">
-          <div class="detail-key">Events ({{ run.events.length }})</div>
-          <pre class="detail-pre">{{ JSON.stringify(run.events, null, 2) }}</pre>
+        <div class="detail-row" v-for="event in run.events">
+          <div class="detail-key">event: {{ event.name }}</div>
+          <template v-if="isStreamEvent(event)">
+            <div class="detail-value">Stream</div>
+            <pre class="detail-pre">{{ getStreamRef(event) }}</pre>
+          </template>
+          <pre v-else class="detail-pre">{{ JSON.stringify(event.data, null, 2) }}</pre>
         </div>
         <div v-if="run.output !== null && run.output !== undefined" class="detail-row">
           <div class="detail-key">Output</div>