Skip to content

Adding tippies to Saga Diagram #2412

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 16 commits into from
May 12, 2025
Merged

Adding tippies to Saga Diagram #2412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2517d8a
Adding tippies to Saga Diagram
cquirosj May 10, 2025
2dad94a
Update src/Frontend/src/components/messages2/SagaDiagram/MessageDataB…
cquirosj May 12, 2025
39a9d05
Update src/Frontend/src/components/messages2/SagaDiagram/MessageDataB…
cquirosj May 12, 2025
3b15dfd
Update src/Frontend/src/components/messages2/SagaDiagram/MessageDataB…
cquirosj May 12, 2025
f1ca403
Update src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue
cquirosj May 12, 2025
78afc84
Update src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNo…
cquirosj May 12, 2025
8f9885f
Update src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNo…
cquirosj May 12, 2025
f04dc21
Update src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNo…
cquirosj May 12, 2025
95aabb3
Update src/Frontend/src/components/messages2/SagaDiagram/SagaComplete…
cquirosj May 12, 2025
accc0cb
Update src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoing…
cquirosj May 12, 2025
dd14e16
remove type from toggle message data button
cquirosj May 12, 2025
33a459c
Update src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNe…
cquirosj May 12, 2025
1709b19
Update src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNe…
cquirosj May 12, 2025
2bb62e0
Update src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNe…
cquirosj May 12, 2025
13b8476
lint
cquirosj May 12, 2025
412fc10
fixing test
cquirosj May 12, 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
2 changes: 1 addition & 1 deletion src/Frontend/src/components/messages2/SagaDiagram.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe("Feature: Message not involved in Saga", () => {
},
});

componentDriver.assert.NoSagaDataAvailableMessageIsShownWithMessage(/no saga data/i);
componentDriver.assert.NoSagaDataAvailableMessageIsShownWithMessage(/This message is not part of any saga/i);
});
});
});
Expand Down
4 changes: 2 additions & 2 deletions src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ const body = computed(() => props.messageData.body.data.value || "");
<LoadingSpinner />
</div>
<div v-else-if="messageData.body.failed_to_load" class="message-data-box message-data-box-error">
<span class="message-data-box-text--error">An error occurred while retrieving the message data</span>
<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>
</div>
<div v-else-if="!messageDataLoading && (!messageData.body.data.value || messageData.body.not_found)" class="message-data-box">
<span class="message-data-box-text--empty">Empty</span>
<span class="message-data-box-text--empty">No message body data available</span>
</div>
<div v-else-if="contentType.isSupported" class="message-data-box message-data-box-content">
<MaximizableCodeEditor :model-value="body" :language="contentType.language" :readOnly="true" :showGutter="false" :modalTitle="modalTitle" />
Expand Down
4 changes: 2 additions & 2 deletions src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import NoSagaIcon from "@/assets/NoSaga.svg";
<div class="body">
<div class="saga-message">
<div class="saga-message-container">
<img class="saga-message-image" :src="NoSagaIcon" alt="" />
<h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title">No Saga Data Available</h1>
<img class="saga-message-image" :src="NoSagaIcon" alt="No saga data found" />
<h1 role="status" aria-label="message-not-involved-in-saga" class="saga-message-title">This message is not part of any saga</h1>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ defineProps<{
<div class="row row--center">
<div class="cell cell--center cell--inverted">
<div class="cell-inner cell-inner-center">
<img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="" />
<h2 class="saga-status-title saga-status-title--inline">Saga Completed</h2>
<div class="timestamp">{{ completionTime }}</div>
<img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="Saga Completed" />
<h2 class="saga-status-title saga-status-title--inline" v-tippy="`The saga has completed its lifecycle`">Saga Completed</h2>
<div class="timestamp" v-tippy="`Completion timestamp: ${completionTime}`">{{ completionTime }}</div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ const props = defineProps<{
'cell-inner-side--active': shouldBeActive,
}"
>
<img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
<h2 class="message-title">{{ message.FriendlyTypeName }}</h2>
<div class="timestamp">{{ message.FormattedTimeSent }}</div>
<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`" />
<h2 class="message-title" v-tippy="message.FriendlyTypeName">{{ message.FriendlyTypeName }}</h2>
Copy link
Member

Choose a reason for hiding this comment

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

Use EllipsesComponent instead?

<div class="timestamp" v-tippy="`Sent at: ${message.FormattedTimeSent}`">{{ message.FormattedTimeSent }}</div>
</div>
<div v-if="showMessageData" class="message-data message-data--active">
<MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />
Expand Down
12 changes: 6 additions & 6 deletions src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ watch(
<div class="row row--right">
<div class="cell cell--center">
<div class="cell-inner cell-inner-line">
<img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="" />
<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>
<span v-else class="timeout-status" aria-label="timeout requested">Timeout Requested = {{ message.TimeoutFriendly }}</span>
<img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="Timeout Request" />
<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>
<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>
</div>
</div>
<div class="cell cell--side"></div>
Expand All @@ -65,9 +65,9 @@ watch(
'cell-inner-side--active': shouldBeActive,
}"
>
<img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
<h2 class="message-title" aria-label="timeout message type">{{ message.FriendlyTypeName }}</h2>
<div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
<img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" v-tippy="`Timeout Message`" />
<h2 class="message-title" aria-label="timeout message type" v-tippy="message.FriendlyTypeName">{{ message.FriendlyTypeName }}</h2>
Copy link
Member

Choose a reason for hiding this comment

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

Use EllipsesComponent instead.

<div class="timestamp" aria-label="timeout message timestamp" v-tippy="`Sent at: ${message.FormattedTimeSent}`">{{ message.FormattedTimeSent }}</div>
</div>
<div v-if="showMessageData" class="message-data message-data--active">
<MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />
Expand Down
2 changes: 1 addition & 1 deletion src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import CopyToClipboard from "@/components/CopyToClipboard.vue";
<div class="body" role="status" aria-label="saga-plugin-needed">
<div class="saga-message">
<div class="saga-message-container">
<img class="saga-message-image" :src="NoSagaIcon" alt="" />
<img class="saga-message-image" :src="NoSagaIcon" alt="Saga plugin required" />
<h1 class="saga-message-title">Saga audit plugin needed to visualize saga</h1>
<div class="saga-message-box">
<p class="saga-message-text">To visualize your saga, please install the appropriate nuget package in your endpoint</p>
Expand Down
25 changes: 17 additions & 8 deletions src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,18 +150,23 @@ const hasStateChanges = computed(() => {
}"
:data-message-id="update.InitiatingMessage.IsSagaTimeoutMessage ? update.MessageId : ''"
>
<img class="saga-icon saga-icon--side-cell" :src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon" alt="" />
<h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
<div class="timestamp" aria-label="initiating message timestamp">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
<img
class="saga-icon saga-icon--side-cell"
:src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon"
alt=""
v-tippy="update.InitiatingMessage.IsSagaTimeoutMessage ? `Timeout Message` : update.InitiatingMessage.IsEventMessage ? `Event Message` : `Command Message`"
/>
<h2 class="message-title" aria-label="initiating message type" v-tippy="update.InitiatingMessage.FriendlyTypeName">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
Copy link
Member

Choose a reason for hiding this comment

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

Use EllipsesComponent instead.

<div class="timestamp" aria-label="initiating message timestamp" v-tippy="`Received at: ${update.InitiatingMessage.FormattedMessageTimestamp}`">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
</div>
</div>
<div class="cell cell--center cell-flex">
<div class="cell-inner cell-inner-center cell-inner--align-bottom">
<template v-if="update.InitiatingMessage.IsSagaTimeoutMessage">
<img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
<img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" v-tippy="`Saga Timeout`" />
<a
v-if="update.InitiatingMessage.HasRelatedTimeoutRequest"
v-tippy="`Scroll to timeout request`"
v-tippy="`View original timeout request`"
Copy link
Member

Choose a reason for hiding this comment

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

👍

href="#"
@click.prevent="navigateToTimeoutRequest"
class="saga-status-title saga-status-title--inline timeout-status"
Expand All @@ -172,9 +177,13 @@ const hasStateChanges = computed(() => {
<h2 v-else class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
<br />
</template>
<img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
<h2 class="saga-status-title saga-status-title--inline">{{ update.StatusDisplay }}</h2>
<div class="timestamp timestamp--inline" aria-label="time stamp">{{ update.FormattedStartTime }}</div>
<img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" v-tippy="update.IsFirstNode ? `Saga Initiated` : `Saga Updated`" />
<h2 class="saga-status-title saga-status-title--inline">
{{ update.StatusDisplay }}
</h2>
<div class="timestamp timestamp--inline" aria-label="time stamp" v-tippy="`Update time: ${update.FormattedStartTime}`">
{{ update.FormattedStartTime }}
</div>
</div>
</div>
</div>
Expand Down