Display QueryResults on query details page

Former-commit-id: d6ffc274

fda-ui/components/dialogs/PersistQuery.vue

@@ -130,6 +130,7 @@ export default {
       }
       this.$toast.success('Query persisted.')
       this.$emit('close')
+      this.loading = false
     },
     async loadUser () {
       this.loading = true
@@ -143,6 +144,7 @@ export default {
         this.$toast.error('Failed load user data')
         console.error('load user data failed', err)
       }
+      this.loading = false
     }
   }
 }

fda-ui/components/query/Results.vue

@@ -98,6 +98,13 @@ ${this.parent.queryId ? `/${this.parent.queryId}` : ''}
         this.loading = false
       }
     },
+    buildHeaders (firstLine) {
+      return Object.keys(firstLine).map(k => ({
+        text: k,
+        value: k,
+        sortable: false
+      }))
+    },
     async execute () {
       this.loading = true
       try {
@@ -110,10 +117,9 @@ ${this.$route.params.container_id}/database/${this.$route.params.database_id}/qu
           headers: this.headers
         })
         this.loading = false
-        // Can't display headers yet
-        // this.result.headers = this.parent.select.map((s) => {
-        //   return { text: s.name, value: s.name, sortable: false }
-        // })
+        if (res.data.result.length) {
+          this.result.headers = this.buildHeaders(res.data.result[0])
+        }
         this.result.rows = res.data.result
         this.total = res.data.resultNumber
       } catch (err) {

fda-ui/pages/container/_container_id/database/_database_id/query/_query_id/index.vue

@@ -7,12 +7,12 @@
         <v-btn color="blue-grey white--text" class="mr-2" :disabled="!query.execution || identifier.id || !token" @click.stop="persistQueryDialog = true">
           <v-icon left>mdi-fingerprint</v-icon> Persist
         </v-btn>
-        <v-btn color="primary" :disabled="!token" @click.stop="reExecute">
+        <v-btn v-if="false" color="primary" :disabled="!token" @click.stop="reExecute">
           <v-icon left>mdi-run</v-icon> Re-Execute
         </v-btn>
       </v-toolbar-title>
     </v-toolbar>
-    <v-card v-if="!loading" flat>
+    <v-card v-if="!loading" class="pb-2" flat>
       <v-card-title>
         Query Information
       </v-card-title>
@@ -70,7 +70,7 @@
           Username: <code v-if="query.username">{{ query.username }}</code><span v-if="!query.username">(empty)</span>
         </p>
       </v-card-text>
-      <QueryResults v-if="false" ref="queryResults" v-model="query.id" />
+      <QueryResults ref="queryResults" v-model="query.id" class="ml-2 mr-2 mt-0" />
     </v-card>
     <v-breadcrumbs :items="items" class="pa-0 mt-2" />
     <v-dialog
@@ -168,7 +168,7 @@ export default {
 
       // refresh QueryResults table
       setTimeout(() => {
-        // this.$refs.queryResults.execute()
+        this.$refs.queryResults.execute()
       }, 200)
     },
     async reExecute () {