2018-05-09 12:01:36 +05:30
|
|
|
<script>
|
|
|
|
import $ from 'jquery';
|
2018-12-13 13:39:08 +05:30
|
|
|
import { glEmojiTag } from '~/emoji';
|
2018-05-09 12:01:36 +05:30
|
|
|
|
|
|
|
import detailedMetric from './detailed_metric.vue';
|
|
|
|
import requestSelector from './request_selector.vue';
|
|
|
|
import simpleMetric from './simple_metric.vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
detailedMetric,
|
|
|
|
requestSelector,
|
|
|
|
simpleMetric,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
store: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
env: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
requestId: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
peekUrl: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
profileUrl: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
detailedMetrics: [
|
|
|
|
{ metric: 'pg', header: 'SQL queries', details: 'queries', keys: ['sql'] },
|
|
|
|
{
|
|
|
|
metric: 'gitaly',
|
|
|
|
header: 'Gitaly calls',
|
|
|
|
details: 'details',
|
|
|
|
keys: ['feature', 'request'],
|
|
|
|
},
|
|
|
|
],
|
2018-12-05 23:21:45 +05:30
|
|
|
simpleMetrics: ['redis'],
|
2018-05-09 12:01:36 +05:30
|
|
|
data() {
|
|
|
|
return { currentRequestId: '' };
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
requests() {
|
|
|
|
return this.store.requestsWithDetails();
|
|
|
|
},
|
|
|
|
currentRequest: {
|
|
|
|
get() {
|
|
|
|
return this.store.findRequest(this.currentRequestId);
|
|
|
|
},
|
|
|
|
set(requestId) {
|
|
|
|
this.currentRequestId = requestId;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
initialRequest() {
|
|
|
|
return this.currentRequestId === this.requestId;
|
|
|
|
},
|
|
|
|
lineProfileModal() {
|
|
|
|
return $('#modal-peek-line-profile');
|
|
|
|
},
|
2018-12-13 13:39:08 +05:30
|
|
|
hasHost() {
|
|
|
|
return this.currentRequest && this.currentRequest.details && this.currentRequest.details.host;
|
|
|
|
},
|
|
|
|
birdEmoji() {
|
|
|
|
if (this.hasHost && this.currentRequest.details.host.canary) {
|
|
|
|
return glEmojiTag('baby_chick');
|
|
|
|
}
|
|
|
|
|
|
|
|
return '';
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.currentRequest = this.requestId;
|
|
|
|
|
|
|
|
if (this.lineProfileModal.length) {
|
|
|
|
this.lineProfileModal.modal('toggle');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
changeCurrentRequest(newRequestId) {
|
|
|
|
this.currentRequest = newRequestId;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
2019-02-15 15:39:39 +05:30
|
|
|
<div id="js-peek" :class="env">
|
|
|
|
<div v-if="currentRequest" class="d-flex container-fluid container-limited">
|
|
|
|
<div id="peek-view-host" class="view">
|
2018-05-09 12:01:36 +05:30
|
|
|
<span
|
2018-12-13 13:39:08 +05:30
|
|
|
v-if="hasHost"
|
2018-05-09 12:01:36 +05:30
|
|
|
class="current-host"
|
2019-02-15 15:39:39 +05:30
|
|
|
:class="{ canary: currentRequest.details.host.canary }"
|
2018-05-09 12:01:36 +05:30
|
|
|
>
|
2019-02-15 15:39:39 +05:30
|
|
|
<span v-html="birdEmoji"></span> {{ currentRequest.details.host.hostname }}
|
2018-05-09 12:01:36 +05:30
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<detailed-metric
|
|
|
|
v-for="metric in $options.detailedMetrics"
|
|
|
|
:key="metric.metric"
|
|
|
|
:current-request="currentRequest"
|
|
|
|
:metric="metric.metric"
|
|
|
|
:header="metric.header"
|
|
|
|
:details="metric.details"
|
|
|
|
:keys="metric.keys"
|
|
|
|
/>
|
2019-02-15 15:39:39 +05:30
|
|
|
<div v-if="initialRequest" id="peek-view-rblineprof" class="view">
|
2018-05-09 12:01:36 +05:30
|
|
|
<button
|
|
|
|
v-if="lineProfileModal.length"
|
|
|
|
class="btn-link btn-blank"
|
|
|
|
data-toggle="modal"
|
|
|
|
data-target="#modal-peek-line-profile"
|
|
|
|
>
|
|
|
|
profile
|
|
|
|
</button>
|
2019-02-15 15:39:39 +05:30
|
|
|
<a v-else :href="profileUrl"> profile </a>
|
2018-05-09 12:01:36 +05:30
|
|
|
</div>
|
|
|
|
<simple-metric
|
|
|
|
v-for="metric in $options.simpleMetrics"
|
|
|
|
:key="metric"
|
2018-12-05 23:21:45 +05:30
|
|
|
:current-request="currentRequest"
|
2018-05-09 12:01:36 +05:30
|
|
|
:metric="metric"
|
|
|
|
/>
|
2019-02-15 15:39:39 +05:30
|
|
|
<div id="peek-view-gc" class="view">
|
|
|
|
<span v-if="currentRequest.details" class="bold">
|
|
|
|
<span title="Invoke Time">{{ currentRequest.details.gc.gc_time }}</span
|
|
|
|
>ms / <span title="Invoke Count">{{ currentRequest.details.gc.invokes }}</span> gc
|
2018-05-09 12:01:36 +05:30
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<request-selector
|
|
|
|
v-if="currentRequest"
|
|
|
|
:current-request="currentRequest"
|
|
|
|
:requests="requests"
|
2018-11-08 19:23:39 +05:30
|
|
|
class="ml-auto"
|
2018-05-09 12:01:36 +05:30
|
|
|
@change-current-request="changeCurrentRequest"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|