Skip to content

Commit 8cb8ffc

Browse files
soujaysoujay
committed
refactor code adn code optimizationrename interface
1 parent d70c0b3 commit 8cb8ffc

File tree

5 files changed

+206
-38
lines changed

5 files changed

+206
-38
lines changed

‎src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@ defineProps<{
88

99
<template>
1010
<div v-for="(item, index) in messageData" :key="index" class="message-data-box">
11-
<b class="message-data-box-text">{{ item.key }}</b>
12-
<span class="message-data-box-text">=</span>
13-
<span class="message-data-box-text--ellipsis" :title="item.value">{{ item.value }}</span>
11+
<template v-if="item.key === 'Content' && item.value === 'EMPTY'">
12+
<span class="message-data-box-text--empty">Empty</span>
13+
</template>
14+
<template v-else>
15+
<b class="message-data-box-text">{{ item.key }}</b>
16+
<span class="message-data-box-text">=</span>
17+
<span class="message-data-box-text--ellipsis" :title="item.value">{{ item.value }}</span>
18+
</template>
1419
</div>
1520
</template>
1621

@@ -32,4 +37,9 @@ defineProps<{
3237
white-space: nowrap;
3338
text-overflow: ellipsis;
3439
}
40+
.message-data-box-text--empty {
41+
display: inline-block;
42+
width: 100%;
43+
text-align: center;
44+
}
3545
</style>

‎src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,21 @@ import { SagaHistory } from "@/resources/SagaHistory";
22
import { typeToName } from "@/composables/typeHumanizer";
33
import { SagaMessageData, SagaMessageDataItem } from "@/stores/SagaDiagramStore";
44

5-
export interface SagaMessageExt {
5+
export interface SagaMessageViewModel {
66
MessageId: string;
77
MessageFriendlyTypeName: string;
88
FormattedTimeSent: string;
99
Data: SagaMessageDataItem[];
1010
IsEventMessage: boolean;
1111
IsCommandMessage: boolean;
1212
}
13-
14-
export interface SagaTimeoutMessage extends SagaMessageExt {
13+
export interface InitiatingMessageViewModel {
14+
InitiatingMessageType: string;
15+
IsInitiatingMessageTimeOut: boolean;
16+
FormattedInitiatingMessageTimestamp: string;
17+
InitiatingMessageData: SagaMessageDataItem[];
18+
}
19+
export interface SagaTimeoutMessageViewModel extends SagaMessageViewModel {
1520
TimeoutFriendly: string;
1621
}
1722

@@ -20,18 +25,15 @@ export interface SagaUpdateViewModel {
2025
StartTime: Date;
2126
FinishTime: Date;
2227
FormattedStartTime: string;
23-
InitiatingMessageType: string;
24-
IsInitiatingMessageTimeOut: boolean;
25-
FormattedInitiatingMessageTimestamp: string;
28+
InitiatingMessage: InitiatingMessageViewModel;
2629
Status: string;
2730
StatusDisplay: string;
2831
HasTimeout: boolean;
2932
IsFirstNode: boolean;
30-
NonTimeoutMessages: SagaMessageExt[];
31-
TimeoutMessages: SagaTimeoutMessage[];
33+
NonTimeoutMessages: SagaMessageViewModel[];
34+
TimeoutMessages: SagaTimeoutMessageViewModel[];
3235
HasNonTimeoutMessages: boolean;
3336
HasTimeoutMessages: boolean;
34-
InitiatingMessageData: SagaMessageDataItem[];
3537
}
3638

3739
export interface SagaViewModel {
@@ -90,10 +92,10 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
9092
({
9193
...msg,
9294
TimeoutFriendly: `${msg.TimeoutSeconds}s`,
93-
}) as SagaTimeoutMessage
95+
}) as SagaTimeoutMessageViewModel
9496
);
9597

96-
const nonTimeoutMessages = outgoingMessages.filter((msg) => !msg.HasTimeout) as SagaMessageExt[];
98+
const nonTimeoutMessages = outgoingMessages.filter((msg) => !msg.HasTimeout) as SagaMessageViewModel[];
9799

98100
const hasTimeout = timeoutMessages.length > 0;
99101

@@ -104,10 +106,12 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
104106
FormattedStartTime: `${startTime.toLocaleDateString()} ${startTime.toLocaleTimeString()}`,
105107
Status: update.status,
106108
StatusDisplay: update.status === "new" ? "Saga Initiated" : "Saga Updated",
107-
InitiatingMessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
108-
FormattedInitiatingMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
109-
InitiatingMessageData: initiatingMessageData,
110-
IsInitiatingMessageTimeOut: isInitiatingMessageTimeOut,
109+
InitiatingMessage: {
110+
InitiatingMessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
111+
FormattedInitiatingMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
112+
InitiatingMessageData: initiatingMessageData,
113+
IsInitiatingMessageTimeOut: isInitiatingMessageTimeOut,
114+
},
111115
HasTimeout: hasTimeout,
112116
IsFirstNode: update.status === "new",
113117
TimeoutMessages: timeoutMessages,

‎src/Frontend/src/components/messages2/SagaDiagram/SagaNonTimeoutOutgoingMessage.vue‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<script setup lang="ts">
2+
import MessageDataBox from "./MessageDataBox.vue";
3+
import CommandIcon from "@/assets/command.svg";
4+
import EventIcon from "@/assets/event.svg";
5+
import { SagaMessageViewModel } from "./SagaDiagramParser";
6+
7+
defineProps<{
8+
message: SagaMessageViewModel;
9+
showMessageData?: boolean;
10+
}>();
11+
</script>
12+
13+
<template>
14+
<div>
15+
<div class="cell-inner cell-inner-side">
16+
<img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
17+
<h2 class="message-title">{{ message.MessageFriendlyTypeName }}</h2>
18+
<div class="timestamp">{{ message.FormattedTimeSent }}</div>
19+
</div>
20+
<div v-if="showMessageData" class="message-data message-data--active">
21+
<MessageDataBox :messageData="message.Data" />
22+
</div>
23+
</div>
24+
</template>
25+
26+
<style scoped>
27+
.row {
28+
display: flex;
29+
}
30+
31+
.row--right {
32+
justify-content: right;
33+
}
34+
35+
.cell {
36+
padding: 0;
37+
}
38+
39+
.cell--center {
40+
width: 50%;
41+
background-color: #f2f2f2;
42+
border: 0;
43+
}
44+
45+
.cell--side {
46+
align-self: flex-end;
47+
width: 25%;
48+
padding: 0;
49+
}
50+
51+
.cell--top-border {
52+
display: flex;
53+
flex-direction: column;
54+
}
55+
56+
.cell-inner-top {
57+
border-top: solid 2px #000000;
58+
margin-left: 1rem;
59+
}
60+
61+
.cell-inner-line {
62+
flex-grow: 1;
63+
padding: 0.25rem 0.5rem;
64+
border-left: solid 2px #000000;
65+
margin-left: 1rem;
66+
}
67+
68+
.cell-inner-side--active {
69+
border: solid 2px #000000;
70+
}
71+
72+
.cell-inner-right {
73+
position: relative;
74+
min-height: 2.5rem;
75+
border: solid 2px #000000;
76+
border-left: 0;
77+
border-bottom: 0;
78+
margin-right: 50%;
79+
}
80+
81+
.cell-inner-right:after {
82+
position: absolute;
83+
display: block;
84+
content: "";
85+
border: solid 6px #000000;
86+
border-top-width: 10px;
87+
border-left-color: transparent;
88+
border-right-color: transparent;
89+
border-bottom: 0;
90+
bottom: 0;
91+
margin-left: 100%;
92+
left: -5px;
93+
}
94+
95+
.message-title {
96+
margin: 0;
97+
font-size: 0.9rem;
98+
font-weight: 900;
99+
overflow: hidden;
100+
white-space: nowrap;
101+
text-overflow: ellipsis;
102+
}
103+
104+
.timestamp {
105+
font-size: 0.9rem;
106+
}
107+
108+
.message-data {
109+
display: none;
110+
padding: 0.2rem;
111+
background-color: #ffffff;
112+
border: solid 1px #cccccc;
113+
font-size: 0.75rem;
114+
}
115+
116+
.message-data--active {
117+
display: block;
118+
}
119+
120+
.timeout-status {
121+
display: inline-block;
122+
font-size: 1rem;
123+
font-weight: 900;
124+
}
125+
126+
.saga-icon--center-cell {
127+
float: none;
128+
display: inline;
129+
width: 1rem;
130+
height: 1rem;
131+
margin-top: -0.3rem;
132+
}
133+
134+
.saga-icon--overlap {
135+
margin-left: -1rem;
136+
}
137+
138+
.cell-inner-side {
139+
margin-top: 1rem;
140+
padding: 0.25rem 0.25rem 0;
141+
border: solid 2px #cccccc;
142+
background-color: #cccccc;
143+
}
144+
145+
.cell-inner-side:nth-child(-n + 2) {
146+
margin-top: 0;
147+
}
148+
149+
.cell-inner-side--active {
150+
border: solid 2px #000000;
151+
}
152+
.saga-icon {
153+
display: block;
154+
float: left;
155+
margin-right: 0.35rem;
156+
}
157+
158+
.saga-icon--side-cell {
159+
width: 2rem;
160+
height: 2rem;
161+
padding: 0.23rem;
162+
}
163+
</style>

‎src/Frontend/src/components/messages2/SagaDiagram/SagaTimeoutMessage.vue‎ renamed to ‎src/Frontend/src/components/messages2/SagaDiagram/SagaTimeoutOutgoingMessage.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup lang="ts">
2-
import { SagaTimeoutMessage } from "./SagaDiagramParser";
2+
import { SagaTimeoutMessageViewModel } from "./SagaDiagramParser";
33
import MessageDataBox from "./MessageDataBox.vue";
44
import TimeoutIcon from "@/assets/TimeoutIcon.svg";
55
import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
66
77
defineProps<{
8-
message: SagaTimeoutMessage;
8+
message: SagaTimeoutMessageViewModel;
99
isLastMessage: boolean;
1010
showMessageData?: boolean;
1111
}>();

‎src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup lang="ts">
22
import { SagaUpdateViewModel } from "./SagaDiagramParser";
33
import MessageDataBox from "./MessageDataBox.vue";
4-
import SagaTimeoutMessage from "./SagaTimeoutMessage.vue";
4+
import SagaTimeoutOutgoingMessage from "./SagaTimeoutOutgoingMessage.vue";
5+
import SagaNonTimeoutOutgoingMessage from "./SagaNonTimeoutOutgoingMessage.vue";
56
67
// Import the images directly
78
import CommandIcon from "@/assets/command.svg";
8-
import EventIcon from "@/assets/event.svg";
99
import SagaInitiatedIcon from "@/assets/SagaInitiatedIcon.svg";
1010
import SagaUpdatedIcon from "@/assets/SagaUpdatedIcon.svg";
1111
import TimeoutIcon from "@/assets/timeout.svg";
@@ -22,14 +22,14 @@ defineProps<{
2222
<div class="row">
2323
<div class="cell cell--side">
2424
<div class="cell-inner cell-inner-side">
25-
<img class="saga-icon saga-icon--side-cell" :src="update.IsInitiatingMessageTimeOut ? TimeoutIcon : CommandIcon" alt="" />
26-
<h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessageType }}</h2>
27-
<div class="timestamp" aria-label="initiating message timestamp">{{ update.FormattedInitiatingMessageTimestamp }}</div>
25+
<img class="saga-icon saga-icon--side-cell" :src="update.InitiatingMessage.IsInitiatingMessageTimeOut ? TimeoutIcon : CommandIcon" alt="" />
26+
<h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.InitiatingMessageType }}</h2>
27+
<div class="timestamp" aria-label="initiating message timestamp">{{ update.InitiatingMessage.FormattedInitiatingMessageTimestamp }}</div>
2828
</div>
2929
</div>
3030
<div class="cell cell--center cell-flex">
3131
<div class="cell-inner cell-inner-center cell-inner--align-bottom">
32-
<template v-if="update.IsInitiatingMessageTimeOut">
32+
<template v-if="update.InitiatingMessage.IsInitiatingMessageTimeOut">
3333
<img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
3434
<h2 class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
3535
<br />
@@ -47,7 +47,7 @@ defineProps<{
4747
<div class="cell cell--side cell--left-border cell--aling-top">
4848
<div v-if="showMessageData" class="message-data message-data--active">
4949
<!-- Generic message data box -->
50-
<MessageDataBox v-if="update.InitiatingMessageType" :messageData="update.InitiatingMessageData" />
50+
<MessageDataBox v-if="update.InitiatingMessage.InitiatingMessageType" :messageData="update.InitiatingMessage.InitiatingMessageData" />
5151
</div>
5252
</div>
5353

@@ -73,21 +73,12 @@ defineProps<{
7373
<!-- Right side - outgoing messages (non-timeout) -->
7474
<div class="cell cell--side cell--aling-top" v-if="update.HasNonTimeoutMessages">
7575
<div class="cell-inner cell-inner-right"></div>
76-
<template v-for="(msg, msgIndex) in update.NonTimeoutMessages" :key="msgIndex">
77-
<div class="cell-inner cell-inner-side">
78-
<img class="saga-icon saga-icon--side-cell" :src="msg.IsEventMessage ? EventIcon : CommandIcon" :alt="msg.IsEventMessage ? 'Event' : 'Command'" />
79-
<h2 class="message-title">{{ msg.MessageFriendlyTypeName }}</h2>
80-
<div class="timestamp">{{ msg.FormattedTimeSent }}</div>
81-
</div>
82-
<div v-if="showMessageData" class="message-data message-data--active">
83-
<MessageDataBox :messageData="msg.Data" />
84-
</div>
85-
</template>
76+
<SagaNonTimeoutOutgoingMessage v-for="(msg, msgIndex) in update.NonTimeoutMessages" :key="msgIndex" :message="msg" :showMessageData="showMessageData" />
8677
</div>
8778
</div>
8879

8980
<!-- Display each outgoing timeout message in separate rows -->
90-
<SagaTimeoutMessage v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex" :message="msg" :isLastMessage="msgIndex === update.TimeoutMessages.length - 1" :showMessageData="showMessageData" />
81+
<SagaTimeoutOutgoingMessage v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex" :message="msg" :isLastMessage="msgIndex === update.TimeoutMessages.length - 1" :showMessageData="showMessageData" />
9182
</div>
9283
</template>
9384

0 commit comments

Comments
 (0)