refactor(recorder): Use frappe child table for query list
This commit is contained in:
Aditya Hase
parent
478e8d34ef
commit
b875e1bc08
1 changed files with 105 additions and 22 deletions
|
|
@ -1,27 +1,109 @@
|
|||
<template>
|
||||
<div>
|
||||
<div><pre>{{ JSON.stringify(request.http.data,null,2) }}</pre></div>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:8%"><span style="margin-right:5px">Index</span><i @click="sort('index')" class="glyphicon" :class="glyphicon('index')"></i></th>
|
||||
<th style="width:82%"><span>Query</span></th>
|
||||
<th style="width:10%"><span style="margin-right:5px">Duration</span><i @click="sort('duration')" class="glyphicon" :class="glyphicon('duration')"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input style="width:100%" v-model="query.filters.query"/></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<router-link style="cursor: pointer" :to="{name: 'sql-detail', params: {call_index: call.index}}" tag="tr" v-for="call in sorted(filtered(request.calls))" :key="call.index" v-bind="call">
|
||||
<td>{{ call.index }}</td>
|
||||
<td>{{ call.query }}</td>
|
||||
<td>{{ call.duration }}</td>
|
||||
</router-link>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row form-section visible-section">
|
||||
<div class="col-sm-12">
|
||||
<h6 class="form-section-heading uppercase">SQL Queries</h6>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="form-column col-sm-12">
|
||||
<form>
|
||||
<div class="frappe-control" data-fieldtype="Table" data-fieldname="fields" title="fields">
|
||||
<div data-fieldname="fields">
|
||||
<div class="form-grid">
|
||||
<div class="grid-heading-row">
|
||||
<div class="grid-row">
|
||||
<div class="data-row row">
|
||||
<div class="row-index sortable-handle col col-xs-1">
|
||||
<span>Index</span></div>
|
||||
<div class="col grid-static-col col-xs-8">
|
||||
<div class="static-area ellipsis">Query</div>
|
||||
</div>
|
||||
<div class="col grid-static-col col-xs-2">
|
||||
<div class="static-area ellipsis">Duration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-body">
|
||||
<div class="rows">
|
||||
<div class="grid-row" :class="showing == index ? 'grid-row-open' : ''" @click="showing = index" v-for="(call, index) in sorted(filtered(request.calls))" :key="call.index" v-bind="call">
|
||||
<div class="data-row row" v-if="showing != index" style="display: block;">
|
||||
<div class="row-index sortable-handle col col-xs-1">
|
||||
<span>{{ call.index }}</span></div>
|
||||
<div class="col grid-static-col col-xs-8 " data-fieldname="code" data-fieldtype="Code">
|
||||
<div class="static-area">
|
||||
<span>{{ call.query }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col grid-static-col col-xs-2 " data-fieldname="duration" data-fieldtype="Time">
|
||||
<div class="static-area ellipsis">{{ call.duration }}</div>
|
||||
</div>
|
||||
<div class="col col-xs-1 sortable-handle"><a class="close btn-open-row">
|
||||
<span class="octicon octicon-triangle-down"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-in-grid">
|
||||
<div class="grid-form-heading" @click="showing = null">
|
||||
<div class="toolbar grid-header-toolbar">
|
||||
<span class="panel-title">
|
||||
SQL Query #<span class="grid-form-row-index">{{ call.index }}</span></span>
|
||||
<button class="btn btn-default btn-xs pull-right" style="margin-left: 7px;">
|
||||
<span class="hidden-xs octicon octicon-triangle-up"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-form-body">
|
||||
<div class="form-area">
|
||||
<div class="form-layout">
|
||||
<div class="form-page">
|
||||
<div class="row form-section visible-section">
|
||||
<div class="section-body">
|
||||
<div class="form-column col-sm-12">
|
||||
<form>
|
||||
<div class="frappe-control">
|
||||
<div class="form-group">
|
||||
<div class="clearfix"><label class="control-label" style="padding-right: 0px;">Query</label></div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-value like-disabled-input for-description"><pre>{{ call.query }}</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frappe-control input-max-width">
|
||||
<div class="form-group">
|
||||
<div class="clearfix"><label class="control-label" style="padding-right: 0px;">Duration</label></div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-value like-disabled-input">{{ call.duration }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frappe-control">
|
||||
<div class="form-group">
|
||||
<div class="clearfix"><label class="control-label" style="padding-right: 0px;">Stack Trace</label></div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-value like-disabled-input for-description"><pre>{{ call.stack }}</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-empty text-center hide">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,6 +112,7 @@ export default {
|
|||
name: "RequestDetail",
|
||||
data() {
|
||||
return {
|
||||
showing: null,
|
||||
request: {
|
||||
calls: [],
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue