관리-도구

편집 파일: QueryEvent.vue

<template>
    <div>
        <DefinitionList title="Query">
            <DefinitionListRow label="Query">
                <code class="code-block"><pre v-html="formatQuery(event.label)"></pre></code>
            </DefinitionListRow>
            <DefinitionListRow label="Time">
                {{ event.metadata.time }}
            </DefinitionListRow>
            <DefinitionListRow label="Connection name">
                {{ event.metadata.connection_name }}
            </DefinitionListRow>
            <DefinitionListRow v-for="(value, key) in event.context" :key="key" :label="key">
                {{ value }}
            </DefinitionListRow>
        </DefinitionList>
    </div>
</template>

export default {
    components: { DefinitionListRow, DefinitionList },

props: ['event'],

methods: {
        formatQuery(query) {
            return sqlFormatter.format(query);
        },
    },
};
</script>