Skip to content

Commit e7f163c

Browse files
johnsimonsjohnsimons
committed
Refactor components
1 parent 116f1bf commit e7f163c

File tree

6 files changed

+68
-31
lines changed

6 files changed

+68
-31
lines changed

‎src/Frontend/src/components/failedmessages/EditRetryDialog.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,8 @@ onMounted(() => {
218218
<div class="row msg-editor-tabs">
219219
<div class="col-sm-12 no-side-padding">
220220
<div role="tablist" class="tabs msg-tabs">
221-
<h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click="togglePanel(1)"><a href="javascript:void(0)">Headers</a></h5>
222-
<h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click="togglePanel(2)"><a href="javascript:void(0)">Message body</a></h5>
221+
<h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Headers</a></h5>
222+
<h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
223223
</div>
224224
</div>
225225
</div>

‎src/Frontend/src/components/messages/BodyView.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import { ExtendedFailedMessage } from "@/resources/FailedMessage";
3+
4+
const props = defineProps<{
5+
message: ExtendedFailedMessage;
6+
}>();
7+
</script>
8+
9+
<template>
10+
<div v-if="props.message.messageBodyNotFound" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
11+
<div v-else-if="props.message.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
12+
<pre v-else>{{ props.message.messageBody }}</pre>
13+
</template>
14+
15+
<style scoped></style>

‎src/Frontend/src/components/messages/FlowDiagram.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import routeLinks from "@/router/routeLinks";
77
import Message from "@/resources/Message";
88
import { NServiceBusHeaders } from "@/resources/Header";
99
import { useRoute } from "vue-router";
10+
import { ExtendedFailedMessage } from "@/resources/FailedMessage";
1011
1112
const props = defineProps<{
12-
conversationId?: string;
13-
messageId: string;
13+
message: ExtendedFailedMessage;
1414
}>();
1515
1616
enum MessageType {
@@ -161,9 +161,9 @@ const elements = ref<(Node | DefaultEdge)[]>([]);
161161
const { onPaneReady, fitView } = useVueFlow();
162162
163163
onMounted(async () => {
164-
if (!props.conversationId) return;
164+
if (!props.message.conversationId) return;
165165
166-
const messages = await getConversation(props.conversationId);
166+
const messages = await getConversation(props.message.conversationId);
167167
const mappedMessages = messages.map(mapMessage);
168168
169169
const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
@@ -203,7 +203,7 @@ function typeIcon(type: MessageType) {
203203
<div id="tree-container">
204204
<VueFlow v-model="elements" :min-zoom="0.1">
205205
<template #node-message="nodeProps">
206-
<div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.messageId && 'current-message']">
206+
<div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.message.id && 'current-message']">
207207
<div class="node-text wordwrap">
208208
<i v-if="nodeProps.data.isError" class="fa pa-flow-failed" />
209209
<i class="fa" :class="typeIcon(nodeProps.data.type)" :title="nodeProps.data.type" />

‎src/Frontend/src/components/messages/HeadersView.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import { ExtendedFailedMessage } from "@/resources/FailedMessage";
3+
4+
const props = defineProps<{
5+
message: ExtendedFailedMessage;
6+
}>();
7+
</script>
8+
9+
<template>
10+
<table class="table" v-if="!props.message.headersNotFound">
11+
<tbody>
12+
<tr class="interactiveList" v-for="(header, index) in props.message.headers" :key="index">
13+
<td nowrap="nowrap">{{ header.key }}</td>
14+
<td>
15+
<pre>{{ header.value }}</pre>
16+
</td>
17+
</tr>
18+
</tbody>
19+
</table>
20+
<div v-if="props.message.headersNotFound" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
21+
</template>
22+
23+
<style scoped></style>

‎src/Frontend/src/components/messages/MessageView.vue‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import { NServiceBusHeaders } from "@/resources/Header";
2020
import { useConfiguration } from "@/composables/configuration";
2121
import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
2222
import { parse, stringify } from "lossless-json";
23+
import BodyView from "@/components/messages/BodyView.vue";
24+
import HeadersView from "@/components/messages/HeadersView.vue";
25+
import StackTraceView from "@/components/messages/StacktraceView.vue";
2326
2427
let refreshInterval: number | undefined;
2528
let pollingFaster = false;
@@ -438,31 +441,15 @@ onUnmounted(() => {
438441
<div class="row">
439442
<div class="col-sm-12 no-side-padding">
440443
<div class="nav tabs msg-tabs">
441-
<h5 :class="{ active: panel === 1 }" class="nav-item" @click="togglePanel(1)"><a href="javascript:void(0)">Stacktrace</a></h5>
442-
<h5 :class="{ active: panel === 2 }" class="nav-item" @click="togglePanel(2)"><a href="javascript:void(0)">Headers</a></h5>
443-
<h5 :class="{ active: panel === 3 }" class="nav-item" @click="togglePanel(3)"><a href="javascript:void(0)">Message body</a></h5>
444-
<h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click="togglePanel(4)"><a href="javascript:void(0)">Flow Diagram</a></h5>
444+
<h5 :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Stacktrace</a></h5>
445+
<h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
446+
<h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
447+
<h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
445448
</div>
446-
<pre v-if="panel === 1">{{ failedMessage.exception?.stack_trace }}</pre>
447-
<table class="table" v-if="panel === 2 && !failedMessage.headersNotFound">
448-
<tbody>
449-
<tr class="interactiveList" v-for="(header, index) in failedMessage.headers" :key="index">
450-
<td nowrap="nowrap">{{ header.key }}</td>
451-
<td>
452-
<pre>{{ header.value }}</pre>
453-
</td>
454-
</tr>
455-
</tbody>
456-
</table>
457-
<div v-if="panel === 2 && failedMessage.headersNotFound" class="alert alert-info">
458-
Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.
459-
</div>
460-
<pre v-if="panel === 3 && !failedMessage.messageBodyNotFound && !failedMessage.bodyUnavailable">{{ failedMessage.messageBody }}</pre>
461-
<div v-if="panel === 3 && failedMessage.messageBodyNotFound" class="alert alert-info">
462-
Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.
463-
</div>
464-
<div v-if="panel === 3 && failedMessage.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
465-
<FlowDiagram v-if="panel === 4" :conversation-id="failedMessage.conversationId" :message-id="id"></FlowDiagram>
449+
<StackTraceView v-if="panel === 1" :message="failedMessage" />
450+
<BodyView v-if="panel === 2" :message="failedMessage" />
451+
<HeadersView v-if="panel === 3" :message="failedMessage" />
452+
<FlowDiagram v-if="panel === 4" :message="failedMessage" />
466453
</div>
467454
</div>
468455

‎src/Frontend/src/components/messages/StacktraceView.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import { ExtendedFailedMessage } from "@/resources/FailedMessage";
3+
import VCodeBlock from "@wdns/vue-code-block";
4+
5+
const props = defineProps<{
6+
message: ExtendedFailedMessage;
7+
}>();
8+
</script>
9+
10+
<template>
11+
<VCodeBlock :code="props.message.exception.stack_trace" lang="csharp"></VCodeBlock>
12+
</template>

0 commit comments

Comments
 (0)