Skip to content

Refactor message tabs views into separate components #2274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 13, 2025
Merged

Refactor message tabs views into separate components #2274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7f163c
Refactor components
johnsimons Mar 13, 2025
6a1aa23
Specify cssPath for code highlight
johnsimons Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/Frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import PageFooter from "./components/PageFooter.vue";
import PageHeader from "./components/PageHeader.vue";
import "bootstrap";
import { useServiceControlUrls } from "@/composables/serviceServiceControlUrls";
import "highlight.js/styles/github-dark.css";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to the mount.ts

import { useServiceControl } from "@/composables/serviceServiceControl";
import LicenseNotifications from "@/components/LicenseNotifications.vue";
import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
Expand Down
3 changes: 1 addition & 2 deletions src/Frontend/src/components/BackendChecksNotifications.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { computed, watch } from "vue";
import { useRouter } from "vue-router";
import "bootstrap";
import { monitoringUrl, serviceControlUrl, useIsMonitoringDisabled } from "@/composables/serviceServiceControlUrls";
import "highlight.js/styles/github-dark.css";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not needed

import { monitoringConnectionState, connectionState, environment } from "@/composables/serviceServiceControl";
import routeLinks from "@/router/routeLinks";
import { useShowToast } from "@/composables/toast";
Expand Down Expand Up @@ -53,5 +52,5 @@ watch(
);
</script>
<template>
<div></div>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed empty divs

<template></template>
</template>
2 changes: 1 addition & 1 deletion src/Frontend/src/components/LicenseNotifications.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,5 @@ onMounted(async () => {
});
</script>
<template>
<div></div>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed empty divs

<template></template>
</template>
4 changes: 2 additions & 2 deletions src/Frontend/src/components/failedmessages/EditRetryDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,8 @@ onMounted(() => {
<div class="row msg-editor-tabs">
<div class="col-sm-12 no-side-padding">
<div role="tablist" class="tabs msg-tabs">
<h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click="togglePanel(1)"><a href="javascript:void(0)">Headers</a></h5>
<h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click="togglePanel(2)"><a href="javascript:void(0)">Message body</a></h5>
<h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Headers</a></h5>
<h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
</div>
</div>
</div>
Expand Down
15 changes: 15 additions & 0 deletions src/Frontend/src/components/messages/BodyView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script setup lang="ts">
import { ExtendedFailedMessage } from "@/resources/FailedMessage";

const props = defineProps<{
message: ExtendedFailedMessage;
}>();
</script>

<template>
<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>
<div v-else-if="props.message.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
<pre v-else>{{ props.message.messageBody }}</pre>
</template>

<style scoped></style>
10 changes: 5 additions & 5 deletions src/Frontend/src/components/messages/FlowDiagram.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import routeLinks from "@/router/routeLinks";
import Message from "@/resources/Message";
import { NServiceBusHeaders } from "@/resources/Header";
import { useRoute } from "vue-router";
import { ExtendedFailedMessage } from "@/resources/FailedMessage";

const props = defineProps<{
conversationId?: string;
messageId: string;
message: ExtendedFailedMessage;
}>();

enum MessageType {
Expand Down Expand Up @@ -161,9 +161,9 @@ const elements = ref<(Node | DefaultEdge)[]>([]);
const { onPaneReady, fitView } = useVueFlow();

onMounted(async () => {
if (!props.conversationId) return;
if (!props.message.conversationId) return;

const messages = await getConversation(props.conversationId);
const messages = await getConversation(props.message.conversationId);
const mappedMessages = messages.map(mapMessage);

const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
Expand Down Expand Up @@ -203,7 +203,7 @@ function typeIcon(type: MessageType) {
<div id="tree-container">
<VueFlow v-model="elements" :min-zoom="0.1">
<template #node-message="nodeProps">
<div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.messageId && 'current-message']">
<div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.message.id && 'current-message']">
<div class="node-text wordwrap">
<i v-if="nodeProps.data.isError" class="fa pa-flow-failed" />
<i class="fa" :class="typeIcon(nodeProps.data.type)" :title="nodeProps.data.type" />
Expand Down
23 changes: 23 additions & 0 deletions src/Frontend/src/components/messages/HeadersView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script setup lang="ts">
import { ExtendedFailedMessage } from "@/resources/FailedMessage";

const props = defineProps<{
message: ExtendedFailedMessage;
}>();
</script>

<template>
<table class="table" v-if="!props.message.headersNotFound">
<tbody>
<tr class="interactiveList" v-for="(header, index) in props.message.headers" :key="index">
<td nowrap="nowrap">{{ header.key }}</td>
<td>
<pre>{{ header.value }}</pre>
</td>
</tr>
</tbody>
</table>
<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>
</template>

<style scoped></style>
35 changes: 11 additions & 24 deletions src/Frontend/src/components/messages/MessageView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { NServiceBusHeaders } from "@/resources/Header";
import { useConfiguration } from "@/composables/configuration";
import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
import { parse, stringify } from "lossless-json";
import BodyView from "@/components/messages/BodyView.vue";
import HeadersView from "@/components/messages/HeadersView.vue";
import StackTraceView from "@/components/messages/StacktraceView.vue";

let refreshInterval: number | undefined;
let pollingFaster = false;
Expand Down Expand Up @@ -438,31 +441,15 @@ onUnmounted(() => {
<div class="row">
<div class="col-sm-12 no-side-padding">
<div class="nav tabs msg-tabs">
<h5 :class="{ active: panel === 1 }" class="nav-item" @click="togglePanel(1)"><a href="javascript:void(0)">Stacktrace</a></h5>
<h5 :class="{ active: panel === 2 }" class="nav-item" @click="togglePanel(2)"><a href="javascript:void(0)">Headers</a></h5>
<h5 :class="{ active: panel === 3 }" class="nav-item" @click="togglePanel(3)"><a href="javascript:void(0)">Message body</a></h5>
<h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click="togglePanel(4)"><a href="javascript:void(0)">Flow Diagram</a></h5>
<h5 :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Stacktrace</a></h5>
<h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
<h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
<h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
</div>
<pre v-if="panel === 1">{{ failedMessage.exception?.stack_trace }}</pre>
<table class="table" v-if="panel === 2 && !failedMessage.headersNotFound">
<tbody>
<tr class="interactiveList" v-for="(header, index) in failedMessage.headers" :key="index">
<td nowrap="nowrap">{{ header.key }}</td>
<td>
<pre>{{ header.value }}</pre>
</td>
</tr>
</tbody>
</table>
<div v-if="panel === 2 && failedMessage.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>
<pre v-if="panel === 3 && !failedMessage.messageBodyNotFound && !failedMessage.bodyUnavailable">{{ failedMessage.messageBody }}</pre>
<div v-if="panel === 3 && failedMessage.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>
<div v-if="panel === 3 && failedMessage.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
<FlowDiagram v-if="panel === 4" :conversation-id="failedMessage.conversationId" :message-id="id"></FlowDiagram>
<StackTraceView v-if="panel === 1" :message="failedMessage" />
<BodyView v-if="panel === 2" :message="failedMessage" />
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved "message body" to be 2nd tab

<HeadersView v-if="panel === 3" :message="failedMessage" />
<FlowDiagram v-if="panel === 4" :message="failedMessage" />
</div>
</div>

Expand Down
12 changes: 12 additions & 0 deletions src/Frontend/src/components/messages/StacktraceView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script setup lang="ts">
import { ExtendedFailedMessage } from "@/resources/FailedMessage";
import VCodeBlock from "@wdns/vue-code-block";
const props = defineProps<{
message: ExtendedFailedMessage;
}>();
</script>

<template>
<VCodeBlock :code="props.message.exception.stack_trace" lang="csharp"></VCodeBlock>
Copy link
Contributor

@PhilBastian PhilBastian Mar 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be csharp highlighted, given that it's a stack trace?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no highlighter mode for stack traces, and c# did not look bad, so I went with that one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would plain text be better then?

</template>
2 changes: 2 additions & 0 deletions src/Frontend/src/mount.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import VueTippy from "vue-tippy";
import { createPinia } from "pinia";
import SimpleTypeahead from "vue3-simple-typeahead";
import { createVCodeBlock } from "@wdns/vue-code-block";
import "highlight.js/styles/github-dark.css";

const toastOptions: PluginOptions = {
position: POSITION.BOTTOM_RIGHT,
Expand All @@ -25,6 +26,7 @@ export function mount({ router }: { router: Router }) {

const VCodeBlock = createVCodeBlock({
theme: "github-dark",
cssPath: "highlight.js/styles/github-dark.css",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed, otherwise the highligh.js lib attempts to contact a CDN

highlightjs: true,
});

Expand Down