Skip to content

Commit 6117adf

Browse files
Christiancquirosj
Christian
authored and
cquirosj
committed
updated html and styles
1 parent 49b7338 commit 6117adf

File tree

1 file changed

+92
-46
lines changed

1 file changed

+92
-46
lines changed

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

Lines changed: 92 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import EventIcon from "@/assets/event.svg";
1313
import TimeoutIcon from "@/assets/TimeoutIcon.svg";
1414
import SagaIcon from "@/assets/SagaIcon.svg";
1515
import SagaInitiatedIcon from "@/assets/SagaInitiatedIcon.svg";
16+
import SagaUpdatedIcon from "@/assets/SagaUpdatedIcon.svg";
1617
import SagaCompletedIcon from "@/assets/SagaCompletedIcon.svg";
1718
import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
1819
import ToolbarEndpointIcon from "@/assets/Shell_ToolbarEndpoint.svg";
@@ -179,7 +180,7 @@ const vm = computed<SagaViewModel>(() => {
179180
<div class="saga-container">
180181
<div class="header">
181182
<div class="saga-top-logo"><img class="saga-top-logo-image" :src="SagaIcon" alt="" />Saga</div>
182-
<button class="saga-button"><img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />Show Message Data</button>
183+
<button class="saga-button" aria-label="message-not-involved-in-saga"><img class="saga-button-icon" :src="ToolbarEndpointIcon" alt="" />Show Message Data</button>
183184
</div>
184185

185186
<!-- No saga Data Available container -->
@@ -213,7 +214,7 @@ const vm = computed<SagaViewModel>(() => {
213214
<div class="block">
214215
<div class="row row--center">
215216
<div class="cell cell--center">
216-
<div class="cell-inner">
217+
<div class="cell-inner cell-inner-center">
217218
<RouterLink :to="vm.MessageIdUrl">← Back to Messages</RouterLink>
218219
<h1 aria-label="saga name" class="main-title">{{ vm.SagaTitle }}</h1>
219220
<div>
@@ -224,6 +225,7 @@ const vm = computed<SagaViewModel>(() => {
224225
</div>
225226
</div>
226227

228+
<!-- Iterate through each saga update -->
227229
<div v-for="(update, index) in vm.SagaUpdates" :key="index" class="block" role="row">
228230
<!-- Initiating message and saga status header -->
229231
<div class="row">
@@ -235,8 +237,8 @@ const vm = computed<SagaViewModel>(() => {
235237
</div>
236238
</div>
237239
<div class="cell cell--center cell-flex">
238-
<div class="cell-inner cell-inner--align-bottom">
239-
<img class="saga-icon saga-icon--center-cell" :src="SagaInitiatedIcon" alt="" />
240+
<div class="cell-inner cell-inner-center cell-inner--align-bottom">
241+
<img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
240242
<h2 class="saga-status-title saga-status-title--inline">{{ update.StatusDisplay }}</h2>
241243
<div class="timestamp timestamp--inline" aria-label="time stamp">{{ update.FormattedStartTime }}</div>
242244
</div>
@@ -247,81 +249,96 @@ const vm = computed<SagaViewModel>(() => {
247249
<div class="row">
248250
<!-- Left side - Message Data box -->
249251
<div class="cell cell--side cell--left-border cell--aling-top">
250-
<div class="message-data-box">
251-
<span class="message-data-box-text"><b>Property Y</b> = Sample value</span>
252+
<div class="message-data message-data--active">
253+
<!-- Generic message data boxes since we don't have specific data -->
254+
<div class="message-data-box" v-if="update.InitiatingMessageType">
255+
<b class="message-data-box-text">OrderId</b>
256+
<span class="message-data-box-text">=</span>
257+
<span class="message-data-box-text--ellipsis" title="Sample ID">Sample ID</span>
258+
</div>
252259
</div>
253260
</div>
254261

255-
<!-- Center - Saga properties and timeout requests -->
262+
<!-- Center - Saga properties -->
256263
<div class="cell cell--center cell--center--border">
257-
<div class="cell-inner cell-inner-center">
264+
<div class="cell-inner cell-inner-line">
258265
<div class="saga-properties">
259266
<a class="saga-properties-link" href="">All Properties</a> /
260267
<a class="saga-properties-link saga-properties-link--active" href="">Updated Properties</a>
261268
</div>
262269

263-
<!-- Display detailed saga properties if available -->
270+
<!-- Display saga properties if available -->
264271
<ul v-if="update.Status !== 'completed'" class="saga-properties-list">
265272
<li class="saga-properties-list-item">
266-
<span class="saga-properties-list-text" title="Prop 1 (new)">Prop 1 (new)</span>
273+
<span class="saga-properties-list-text" title="Property (new)">Property (new)</span>
267274
<span class="saga-properties-list-text">=</span>
268-
<span class="saga-properties-list-text" title=""> sample property value</span>
275+
<span class="saga-properties-list-text" title="Sample Value"> Sample Value</span>
269276
</li>
270277
</ul>
271-
272-
<!-- Timeout request indicators -->
273-
<template v-if="update.HasTimeout">
274-
<div v-for="(msg, msgIndex) in update.TimeoutMessages" :key="msgIndex">
275-
<img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="" />
276-
<a class="timeout-status" href="" aria-label="timeout requested"> Timeout Requested = {{ msg.TimeoutFriendly }} </a>
277-
</div>
278-
</template>
279278
</div>
280279
</div>
281280

282281
<!-- Right side - outgoing messages (non-timeout) -->
283282
<div class="cell cell--side cell--aling-top" v-if="update.HasNonTimeoutMessages">
284283
<div class="cell-inner cell-inner-right"></div>
285-
<div v-for="(msg, msgIndex) in update.NonTimeoutMessages" :key="msgIndex">
284+
<template v-for="(msg, msgIndex) in update.NonTimeoutMessages" :key="msgIndex">
286285
<div class="cell-inner cell-inner-side">
287286
<img class="saga-icon saga-icon--side-cell" :src="msg.IsEventMessage ? EventIcon : CommandIcon" :alt="msg.IsEventMessage ? 'Event' : 'Command'" />
288287
<h2 class="message-title">{{ msg.MessageFriendlyTypeName }}</h2>
289288
<div class="timestamp">{{ msg.FormattedTimeSent }}</div>
290289
</div>
291-
<div class="message-data-box">
292-
<span class="message-data-box-text"><b>Property 1</b> = Sample value</span>
290+
<div class="message-data message-data--active">
291+
<div class="message-data-box">
292+
<b class="message-data-box-text">OrderId</b>
293+
<span class="message-data-box-text">=</span>
294+
<span class="message-data-box-text--ellipsis" title="Sample ID">Sample ID</span>
295+
</div>
293296
</div>
294-
</div>
297+
</template>
295298
</div>
296299
</div>
297300

298-
<!-- Display each outgoing timeout message -->
299-
<div v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex" class="row row--right">
300-
<div class="cell cell--center cell--top-border">
301-
<div class="cell-inner cell-inner-top"></div>
302-
</div>
303-
<div class="cell cell--side">
304-
<div class="cell-inner cell-inner-right"></div>
305-
<div class="cell-inner cell-inner-side cell-inner-side--active">
306-
<img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
307-
<h2 class="message-title" aria-label="timeout message type">{{ msg.MessageFriendlyTypeName }}</h2>
308-
<div class="timestamp" aria-label="timeout message timestamp">{{ msg.FormattedTimeSent }}</div>
301+
<!-- Display each outgoing timeout message in separate rows -->
302+
<template v-for="(msg, msgIndex) in update.TimeoutMessages" :key="'timeout-' + msgIndex">
303+
<div class="row row--right">
304+
<div class="cell cell--center">
305+
<div class="cell-inner cell-inner-line">
306+
<img class="saga-icon saga-icon--center-cell saga-icon--overlap" :src="SagaTimeoutIcon" alt="" />
307+
<a class="timeout-status" href="" aria-label="timeout requested">Timeout Requested = {{ msg.TimeoutFriendly }}</a>
308+
</div>
309+
</div>
310+
<div class="cell cell--side"></div>
311+
<div class="cell cell--center cell--top-border">
312+
<div class="cell-inner cell-inner-top"></div>
313+
<div class="cell-inner cell-inner-line"></div>
309314
</div>
310-
<div class="message-data-box">
311-
<span class="message-data-box-text"><b>Property X</b> =Sample value</span>
315+
<div class="cell cell--side">
316+
<div class="cell-inner cell-inner-right"></div>
317+
<div class="cell-inner cell-inner-side cell-inner-side--active">
318+
<img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
319+
<h2 class="message-title" aria-label="timeout message type">{{ msg.MessageFriendlyTypeName }}</h2>
320+
<div class="timestamp" aria-label="timeout message timestamp">{{ msg.FormattedTimeSent }}</div>
321+
</div>
322+
<div class="message-data message-data--active">
323+
<div class="message-data-box">
324+
<b class="message-data-box-text">OrderId</b>
325+
<span class="message-data-box-text">=</span>
326+
<span class="message-data-box-text--ellipsis" title="Sample ID">Sample ID</span>
327+
</div>
328+
</div>
312329
</div>
313330
</div>
314-
</div>
331+
</template>
315332
</div>
316333

317334
<!-- Saga Completed section -->
318335
<div v-if="vm.SagaCompleted" class="block">
319336
<div class="row row--center">
320337
<div class="cell cell--center cell--inverted">
321-
<div class="cell-inner">
338+
<div class="cell-inner cell-inner-center">
322339
<img class="saga-icon saga-icon--center-cell" :src="SagaCompletedIcon" alt="" />
323340
<h2 class="saga-status-title saga-status-title--inline">Saga Completed</h2>
324-
<div class="timestamp" aria-label="saga completion time">{{ vm.FormattedCompletionTime }}</div>
341+
<div class="timestamp">{{ vm.FormattedCompletionTime }}</div>
325342
</div>
326343
</div>
327344
</div>
@@ -394,7 +411,8 @@ const vm = computed<SagaViewModel>(() => {
394411
width: 1.5rem;
395412
}
396413
.container {
397-
/* width: 66.6667%; */
414+
width: 66.6667%;
415+
min-width: 50rem;
398416
}
399417
.block {
400418
/* border: solid 1px lightgreen; */
@@ -443,28 +461,40 @@ const vm = computed<SagaViewModel>(() => {
443461
}
444462
445463
.cell--top-border {
446-
/* align-self: flex-start; */
464+
display: flex;
465+
flex-direction: column;
447466
}
448467
.cell-inner {
449-
padding: 0.5rem;
468+
/* padding: 0.5rem; */
450469
}
451470
.cell-inner-top {
452471
border-top: solid 2px #000000;
453472
margin-left: 1rem;
454473
}
455474
.cell-inner-center {
456475
padding: 0.5rem;
476+
}
477+
.cell-inner-line {
478+
flex-grow: 1;
479+
padding: 0.25rem 0.5rem;
457480
border-left: solid 2px #000000;
458481
margin-left: 1rem;
459482
}
483+
.cell-inner-line:first-child {
484+
flex-grow: 1;
485+
}
460486
.cell-inner-center:first-child {
461487
flex-grow: 1;
462488
}
463489
.cell-inner-side {
490+
margin-top: 1rem;
464491
padding: 0.25rem 0.25rem 0;
465492
border: solid 2px #cccccc;
466493
background-color: #cccccc;
467494
}
495+
.cell-inner-side:nth-child(-n + 2) {
496+
margin-top: 0;
497+
}
468498
.cell-inner-side--active {
469499
border: solid 2px #000000;
470500
}
@@ -495,6 +525,10 @@ const vm = computed<SagaViewModel>(() => {
495525
496526
/* Content styles */
497527
528+
* {
529+
/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
530+
}
531+
498532
.saga-top-logo {
499533
margin-bottom: 0.5rem;
500534
color: #00a3c4;
@@ -605,23 +639,35 @@ const vm = computed<SagaViewModel>(() => {
605639
display: inline-block;
606640
text-overflow: ellipsis;
607641
}
642+
.saga-properties-list-text:last-child {
643+
padding-right: 0;
644+
text-overflow: ellipsis;
645+
}
608646
609647
.timeout-status {
610648
display: inline-block;
611-
margin-top: 0.7rem;
612649
font-size: 1rem;
613650
font-weight: 900;
614651
}
615652
616-
.message-data-box {
617-
display: flex;
618-
margin-bottom: 1rem;
653+
.message-data {
654+
display: none;
619655
padding: 0.2rem;
620656
background-color: #ffffff;
621657
border: solid 1px #cccccc;
622658
font-size: 0.75rem;
623659
}
660+
.message-data--active {
661+
display: block;
662+
}
663+
.message-data-box {
664+
display: flex;
665+
}
624666
.message-data-box-text {
667+
display: inline-block;
668+
margin-right: 0.25rem;
669+
}
670+
.message-data-box-text--ellipsis {
625671
display: inline-block;
626672
overflow: hidden;
627673
max-width: 100%;

0 commit comments

Comments
 (0)