Skip to content

Commit 0f22b8d

Browse files
johnsimonsjohnsimons
authored
Merge pull request #2412 from Particular/saga-missing-typpies
Adding tippies to Saga Diagram
2 parents 4955414 + 412fc10 commit 0f22b8d

File tree

8 files changed

+35
-26
lines changed

8 files changed

+35
-26
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ describe("Feature: Message not involved in Saga", () => {
4343
},
4444
});
4545

46-
componentDriver.assert.NoSagaDataAvailableMessageIsShownWithMessage(/no saga data/i);
46+
componentDriver.assert.NoSagaDataAvailableMessageIsShownWithMessage(/This message is not part of any saga/i);
4747
});
4848
});
4949
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ 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">Failed to load message data, there might be a connection issue or the message may no longer be available.</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">No message body data available</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" />

‎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="No saga data found" />
10+
<h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title">This message is not part of any saga</h1>
1111
</div>
1212
</div>
1313
</div>

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

Lines changed: 3 additions & 3 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="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>

‎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="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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ 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="" />
10+
<img class="saga-message-image" :src="NoSagaIcon" alt="Saga plugin required" />
1111
<h1 class="saga-message-title">Saga audit plugin needed to visualize saga</h1>
1212
<div class="saga-message-box">
1313
<p class="saga-message-text">To visualize your saga, please install the appropriate nuget package in your endpoint</p>

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

Lines changed: 17 additions & 8 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>

0 commit comments

Comments
 (0)