Skip to content

Commit f2ecc21

Browse files
cquirosjcquirosj
committed
Adding tippies to Saga Diagram
1 parent 29b3afc commit f2ecc21

File tree

8 files changed

+48
-34
lines changed

8 files changed

+48
-34
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ const vm = computed<SagaViewModel>(() => {
6767
<div class="saga-container">
6868
<!-- Toolbar header -->
6969
<div v-if="vm.HasSagaData" class="toolbar">
70-
<button type="button" class="btn btn-secondary btn-sm" aria-label="show-message-data-button" @click="sagaDiagramStore.toggleMessageData"><i class="fa fa-list-ul"></i> {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}</button>
70+
<button type="button" class="btn btn-secondary btn-sm" v-tippy="`Toggle message data visibility`" aria-label="show-message-data-button" @click="sagaDiagramStore.toggleMessageData">
71+
<i class="fa fa-list-ul"></i> {{ vm.ShowMessageData ? "Hide Message Data" : "Show Message Data" }}
72+
</button>
7173
</div>
7274

7375
<!-- Loading Spinner -->

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,18 @@ const body = computed(() => props.messageData.body.data.value || "");
2828
<LoadingSpinner />
2929
</div>
3030
<div v-else-if="messageData.body.failed_to_load" class="message-data-box message-data-box-error">
31-
<span class="message-data-box-text--error">An error occurred while retrieving the message data</span>
31+
<span class="message-data-box-text--error" v-tippy="`Failed to load message data - there might be a connection issue or the message may no longer be available`">An error occurred while retrieving the message data</span>
3232
</div>
3333
<div v-else-if="!messageDataLoading && (!messageData.body.data.value || messageData.body.not_found)" class="message-data-box">
34-
<span class="message-data-box-text--empty">Empty</span>
34+
<span class="message-data-box-text--empty" v-tippy="`No message body data available`">Empty</span>
3535
</div>
3636
<div v-else-if="contentType.isSupported" class="message-data-box message-data-box-content">
3737
<MaximizableCodeEditor :model-value="body" :language="contentType.language" :readOnly="true" :showGutter="false" :modalTitle="modalTitle" />
3838
</div>
3939
<div v-else class="message-data-box message-data-box-error">
40-
<span class="message-data-box-text--unsupported">Message body cannot be displayed because content type "{{ messageData.body.data.content_type }}" is not supported.</span>
40+
<span class="message-data-box-text--unsupported" v-tippy="`Content type '${messageData.body.data.content_type}' cannot be displayed in the message viewer`"
41+
>Message body cannot be displayed because content type "{{ messageData.body.data.content_type }}" is not supported.</span
42+
>
4143
</div>
4244
</template>
4345

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import NoSagaIcon from "@/assets/NoSaga.svg";
66
<div class="body">
77
<div class="saga-message">
88
<div class="saga-message-container">
9-
<img class="saga-message-image" :src="NoSagaIcon" alt="" />
10-
<h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title">No Saga Data Available</h1>
9+
<img class="saga-message-image" :src="NoSagaIcon" alt="" v-tippy="`No saga data found`" />
10+
<h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title" v-tippy="`This message is not part of any saga`">No Saga Data Available</h1>
1111
</div>
1212
</div>
1313
</div>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ defineProps<{
1111
<div class="row row--center">
1212
<div class="cell cell--center cell--inverted">
1313
<div class="cell-inner cell-inner-center">
14-
<img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="" />
15-
<h2 class="saga-status-title saga-status-title--inline">Saga Completed</h2>
16-
<div class="timestamp">{{ completionTime }}</div>
14+
<img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="" v-tippy="`Saga Completed`" />
15+
<h2 class="saga-status-title saga-status-title--inline" v-tippy="`The saga has completed its lifecycle`">Saga Completed</h2>
16+
<div class="timestamp" v-tippy="`Completion timestamp: ${completionTime}`">{{ completionTime }}</div>
1717
</div>
1818
</div>
1919
</div>
@@ -22,7 +22,8 @@ defineProps<{
2222

2323
<style scoped>
2424
.block {
25-
/* block container styles */
25+
display: block;
26+
margin-bottom: 1rem;
2627
}
2728
2829
.row {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ const props = defineProps<{
2626
'cell-inner-side--active': shouldBeActive,
2727
}"
2828
>
29-
<img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
30-
<h2 class="message-title">{{ message.FriendlyTypeName }}</h2>
31-
<div class="timestamp">{{ message.FormattedTimeSent }}</div>
29+
<img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" v-tippy="message.IsEventMessage ? `Event Message` : `Command Message`" />
30+
<h2 class="message-title" v-tippy="message.FriendlyTypeName">{{ message.FriendlyTypeName }}</h2>
31+
<div class="timestamp" v-tippy="`Sent at: ${message.FormattedTimeSent}`">{{ message.FormattedTimeSent }}</div>
3232
</div>
3333
<div v-if="showMessageData" class="message-data message-data--active">
3434
<MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ watch(
4545
<div class="row row--right">
4646
<div class="cell cell--center">
4747
<div class="cell-inner cell-inner-line">
48-
<img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="" />
49-
<a v-if="message.HasBeenProcessed" v-tippy="`Scroll to invoked timeout`" class="timeout-status" href="#" @click.prevent="navigateToTimeout" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</a>
50-
<span v-else class="timeout-status" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</span>
48+
<img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="" v-tippy="`Timeout Request`" />
49+
<a v-if="message.HasBeenProcessed" v-tippy="`View timeout processing details`" class="timeout-status" href="#" @click.prevent="navigateToTimeout" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</a>
50+
<span v-else class="timeout-status" aria-label="timeout requested" v-tippy="`This timeout has been requested but not yet processed`">Timeout Requested = {{ message.TimeoutFriendly }}</span>
5151
</div>
5252
</div>
5353
<div class="cell cell--side"></div>
@@ -65,9 +65,9 @@ watch(
6565
'cell-inner-side--active': shouldBeActive,
6666
}"
6767
>
68-
<img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
69-
<h2 class="message-title" aria-label="timeout message type">{{ message.FriendlyTypeName }}</h2>
70-
<div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
68+
<img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" v-tippy="`Timeout Message`" />
69+
<h2 class="message-title" aria-label="timeout message type" v-tippy="message.FriendlyTypeName">{{ message.FriendlyTypeName }}</h2>
70+
<div class="timestamp" aria-label="timeout message timestamp" v-tippy="`Sent at: ${message.FormattedTimeSent}`">{{ message.FormattedTimeSent }}</div>
7171
</div>
7272
<div v-if="showMessageData" class="message-data message-data--active">
7373
<MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import CopyToClipboard from "@/components/CopyToClipboard.vue";
77
<div class="body" role="status" aria-label="saga-plugin-needed">
88
<div class="saga-message">
99
<div class="saga-message-container">
10-
<img class="saga-message-image" :src="NoSagaIcon" alt="" />
11-
<h1 class="saga-message-title">Saga audit plugin needed to visualize saga</h1>
10+
<img class="saga-message-image" :src="NoSagaIcon" alt="" v-tippy="`Saga plugin required`" />
11+
<h1 class="saga-message-title" v-tippy="`The saga audit plugin is required to show saga visualization`">Saga audit plugin needed to visualize saga</h1>
1212
<div class="saga-message-box">
13-
<p class="saga-message-text">To visualize your saga, please install the appropriate nuget package in your endpoint</p>
14-
<a href="https://www.nuget.org/packages/NServiceBus.SagaAudit" class="saga-message-link">install-package NServiceBus.SagaAudit</a>
13+
<p class="saga-message-text" v-tippy="`You need to install the NServiceBus.SagaAudit package in your endpoint`">To visualize your saga, please install the appropriate nuget package in your endpoint</p>
14+
<a href="https://www.nuget.org/packages/NServiceBus.SagaAudit" class="saga-message-link" v-tippy="`Go to NServiceBus.SagaAudit NuGet page`">install-package NServiceBus.SagaAudit</a>
1515
<span class="clippy-button"><CopyToClipboard value="install-package NServiceBus.SagaAudit" :isIconOnly="true" /></span>
1616
</div>
1717
</div>

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -150,18 +150,23 @@ const hasStateChanges = computed(() => {
150150
}"
151151
:data-message-id="update.InitiatingMessage.IsSagaTimeoutMessage ? update.MessageId : ''"
152152
>
153-
<img class="saga-icon saga-icon--side-cell" :src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon" alt="" />
154-
<h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
155-
<div class="timestamp" aria-label="initiating message timestamp">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
153+
<img
154+
class="saga-icon saga-icon--side-cell"
155+
:src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon"
156+
alt=""
157+
v-tippy="update.InitiatingMessage.IsSagaTimeoutMessage ? `Timeout Message` : update.InitiatingMessage.IsEventMessage ? `Event Message` : `Command Message`"
158+
/>
159+
<h2 class="message-title" aria-label="initiating message type" v-tippy="update.InitiatingMessage.FriendlyTypeName">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
160+
<div class="timestamp" aria-label="initiating message timestamp" v-tippy="`Received at: ${update.InitiatingMessage.FormattedMessageTimestamp}`">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
156161
</div>
157162
</div>
158163
<div class="cell cell--center cell-flex">
159164
<div class="cell-inner cell-inner-center cell-inner--align-bottom">
160165
<template v-if="update.InitiatingMessage.IsSagaTimeoutMessage">
161-
<img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
166+
<img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" v-tippy="`Saga Timeout`" />
162167
<a
163168
v-if="update.InitiatingMessage.HasRelatedTimeoutRequest"
164-
v-tippy="`Scroll to timeout request`"
169+
v-tippy="`View original timeout request`"
165170
href="#"
166171
@click.prevent="navigateToTimeoutRequest"
167172
class="saga-status-title saga-status-title--inline timeout-status"
@@ -172,9 +177,13 @@ const hasStateChanges = computed(() => {
172177
<h2 v-else class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
173178
<br />
174179
</template>
175-
<img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
176-
<h2 class="saga-status-title saga-status-title--inline">{{ update.StatusDisplay }}</h2>
177-
<div class="timestamp timestamp--inline" aria-label="time stamp">{{ update.FormattedStartTime }}</div>
180+
<img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" v-tippy="update.IsFirstNode ? `Saga Initiated` : `Saga Updated`" />
181+
<h2 class="saga-status-title saga-status-title--inline">
182+
{{ update.StatusDisplay }}
183+
</h2>
184+
<div class="timestamp timestamp--inline" aria-label="time stamp" v-tippy="`Update time: ${update.FormattedStartTime}`">
185+
{{ update.FormattedStartTime }}
186+
</div>
178187
</div>
179188
</div>
180189
</div>
@@ -198,17 +207,17 @@ const hasStateChanges = computed(() => {
198207

199208
<!-- Error message when parsing fails -->
200209
<div v-if="hasParsingError" class="json-container">
201-
<div class="parsing-error-message">An error occurred while parsing and displaying the saga state for this update</div>
210+
<div class="parsing-error-message" v-tippy="`There was an error parsing the JSON data for the saga state`">An error occurred while parsing and displaying the saga state for this update</div>
202211
</div>
203212

204213
<!-- Initial state display -->
205-
<div v-else-if="update.IsFirstNode" class="json-container json-container--first-node">
214+
<div v-else-if="update.IsFirstNode" class="json-container json-container--first-node" v-tippy="`Initial state when saga was created`">
206215
<MaximizableCodeEditor :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showGutter="false" modalTitle="Initial Saga State" :extensions="[monospaceTheme]" />
207216
</div>
208217

209218
<!-- No changes message -->
210219
<div v-else-if="!hasStateChanges" class="json-container">
211-
<div class="no-changes-message">No state changes in this update</div>
220+
<div class="no-changes-message" v-tippy="`This saga update didn't modify the saga's state data`">No state changes in this update</div>
212221
</div>
213222

214223
<!-- Side-by-side diff view for state changes -->

0 commit comments

Comments
 (0)