Add setting project_id and quicklog_url as well as filtering on trace…

…/span id [#2 #3]

src/components/Entries.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="entries">
-    <h3>QuickVue</h3>
     <table cellspacing="0" border="1">
       <tr>
         <th>Published UTC</th>
@@ -47,6 +46,7 @@
 import { getCookie, setCookie } from '../util/cookies.js'
 
 export default {
+  props: ['quicklogUrl', 'projectId', 'traceOrSpanId'],
   created () {
     this.load()
   },
@@ -58,6 +58,15 @@ export default {
   watch: {
     '$route' () {
       this.load()
+    },
+    'quicklogUrl' () {
+      this.load()
+    },
+    'projectId' () {
+      this.load()
+    },
+    'traceOrSpanId' () {
+      this.load()
     }
   },
   methods: {
@@ -90,13 +99,8 @@ export default {
     load () {
       let self = this
       let xhr = new XMLHttpRequest()
-      let params = new URLSearchParams(window.location.search.substring(1))
-      let url = params.get("quicklog_url") || 'http://localhost:8124/entries'
-      url = url.replace('quicklog_url=', '')
-      // if (authorization) {
-      //   xhr.setRequestHeader('Authorization', authorization)
-      //   url = url + '&_=' + Date.now()
-      // }
+      // let params = new URLSearchParams(window.location.search.substring(1))
+      let url = this.quicklogUrl + '/entries?project_id=' + this.projectId + '&trace_id=' + this.traceOrSpanId + '&span_id=' + this.traceOrSpanId
       xhr.open('GET', url)
       xhr.onload = function() {
         if (xhr.status === 200 && xhr.responseText) {

src/components/QuickVue.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="quick-vue">
+    <div>
+      QuickVue
+      <span>project: <input v-model="projectId"/></span>
+      <span>trace/span: <input v-model="traceOrSpanId"/></span>
+      <span>quicklog url: <input v-model="quicklogUrl"/></span>
+    </div>
+    <entries :projectId="projectId" :traceOrSpanId="traceOrSpanId" :quicklogUrl="quicklogUrl"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      projectId: "4",
+      traceOrSpanId: "",
+      quicklogUrl: ""
+    }
+  }
+}
+</script>
+
+<style scoped>
+h3 {
+  margin-top: 0.5em;
+  margin-bottom: 0.2em;
+}
+a {
+  text-decoration: none;
+  color: #400040;
+}
+.logo-box {
+  background-color: #ffe800;
+  padding-top: 0.5em;
+  padding-bottom: 0.25em;
+  padding-left: 0.1em;
+  padding-right: 0.1em;
+  border: 1px solid #808080;
+}
+</style>

src/main.js

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import Entries from '@/components/Entries'
 import TextValue from '@/components/TextValue'
 import Tags from '@/components/Tags'
 import * as labels from './util/labels'
@@ -11,6 +12,7 @@ Vue.config.productionTip = false
 
 Object.defineProperty(Vue.prototype, '$labels', { value: labels })
 
+Vue.component('entries', Entries)
 Vue.component('text-value', TextValue)
 Vue.component('tags', Tags)
 

src/router/index.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Entries from "@/components/Entries"
+import QuickVue from "@/components/QuickVue"
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
-    { path: "/", name: "Entries", component: Entries }
+    { path: "/", name: "QuickVue", component: QuickVue }
   ]
 })