Skip to content

Commit 4d4fe20

Browse files
Christiancquirosj
Christian
authored and
cquirosj
committed
Split into smaller components
1 parent 0fcc090 commit 4d4fe20

File tree

9 files changed

+893
-570
lines changed

9 files changed

+893
-570
lines changed

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

Lines changed: 19 additions & 570 deletions
Large diffs are not rendered by default.

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
propertyKey?: string;
4+
propertyValue?: string;
5+
title?: string;
6+
}>();
7+
</script>
8+
9+
<template>
10+
<div class="message-data-box">
11+
<b class="message-data-box-text">{{ propertyKey || "OrderId" }}</b>
12+
<span class="message-data-box-text">=</span>
13+
<span class="message-data-box-text--ellipsis" :title="title || propertyValue || 'Sample ID'">{{ propertyValue || "Sample ID" }}</span>
14+
</div>
15+
</template>
16+
17+
<style scoped>
18+
.message-data-box {
19+
display: flex;
20+
}
21+
22+
.message-data-box-text {
23+
display: inline-block;
24+
margin-right: 0.25rem;
25+
}
26+
27+
.message-data-box-text--ellipsis {
28+
display: inline-block;
29+
overflow: hidden;
30+
max-width: 100%;
31+
padding: 0%;
32+
white-space: nowrap;
33+
text-overflow: ellipsis;
34+
}
35+
</style>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
import NoSagaIcon from "@/assets/NoSaga.svg";
3+
</script>
4+
5+
<template>
6+
<div class="body">
7+
<div class="saga-message">
8+
<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>
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<style scoped>
17+
.body {
18+
display: flex;
19+
flex: 1;
20+
justify-content: center;
21+
}
22+
23+
.saga-message {
24+
display: flex;
25+
align-items: center;
26+
}
27+
28+
.saga-message-image {
29+
display: block;
30+
margin: auto;
31+
}
32+
33+
.saga-message-title {
34+
text-align: center;
35+
margin: 0.2rem 0 0;
36+
font-size: 1.5rem;
37+
color: #cccccc;
38+
}
39+
</style>

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<script setup lang="ts">
2+
import SagaCompletedIcon from "@/assets/SagaCompletedIcon.svg";
3+
4+
defineProps<{
5+
completionTime: string;
6+
}>();
7+
</script>
8+
9+
<template>
10+
<div class="block">
11+
<div class="row row--center">
12+
<div class="cell cell--center cell--inverted">
13+
<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>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<style scoped>
24+
.block {
25+
/* block container styles */
26+
}
27+
28+
.row {
29+
display: flex;
30+
}
31+
32+
.row--center {
33+
justify-content: center;
34+
}
35+
36+
.cell--center {
37+
width: 50%;
38+
background-color: #f2f2f2;
39+
border: 0;
40+
}
41+
42+
.cell--inverted {
43+
background-color: #333333;
44+
color: #ffffff;
45+
margin-bottom: 2rem;
46+
}
47+
48+
.cell-inner-center {
49+
padding: 0.5rem;
50+
}
51+
52+
.saga-status-title {
53+
margin: 0;
54+
font-size: 1rem;
55+
font-weight: 900;
56+
}
57+
58+
.saga-status-title--inline {
59+
display: inline-block;
60+
}
61+
62+
.cell--inverted .saga-status-title {
63+
font-size: 0.9rem;
64+
}
65+
66+
.timestamp {
67+
font-size: 0.9rem;
68+
}
69+
70+
.cell--inverted .timestamp {
71+
margin-left: 1.2rem;
72+
}
73+
74+
.saga-icon {
75+
display: block;
76+
float: left;
77+
margin-right: 0.35rem;
78+
}
79+
80+
.saga-icon--center-cell {
81+
float: none;
82+
display: inline;
83+
width: 1rem;
84+
height: 1rem;
85+
margin-top: -0.3rem;
86+
}
87+
</style>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import { RouterLink } from "vue-router";
3+
4+
defineProps<{
5+
sagaTitle: string;
6+
sagaGuid: string;
7+
messageIdUrl: string;
8+
}>();
9+
</script>
10+
11+
<template>
12+
<div class="block">
13+
<div class="row row--center">
14+
<div class="cell cell--center">
15+
<div class="cell-inner cell-inner-center">
16+
<RouterLink :to="messageIdUrl">← Back to Messages</RouterLink>
17+
<h1 aria-label="saga name" class="main-title">{{ sagaTitle }}</h1>
18+
<div>
19+
<b>guid</b> <span role="note" aria-label="saga guid">{{ sagaGuid }}</span>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<style scoped>
28+
.block {
29+
/* empty block class for component structure */
30+
}
31+
32+
.row {
33+
display: flex;
34+
}
35+
36+
.row--center {
37+
justify-content: center;
38+
}
39+
40+
.cell--center {
41+
width: 50%;
42+
background-color: #f2f2f2;
43+
border: 0;
44+
}
45+
46+
.cell-inner-center {
47+
padding: 0.5rem;
48+
}
49+
50+
.main-title {
51+
margin: 0.3rem 0;
52+
padding-bottom: 0.5rem;
53+
border-bottom: solid 2px #00a3c4;
54+
font-size: 1.5rem;
55+
}
56+
</style>

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup lang="ts">
2+
import NoSagaIcon from "@/assets/NoSaga.svg";
3+
import CopyClipboardIcon from "@/assets/Shell_CopyClipboard.svg";
4+
</script>
5+
6+
<template>
7+
<div class="body" role="status" aria-label="saga-plugin-needed">
8+
<div class="saga-message">
9+
<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>
12+
<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>
15+
<img class="saga-message-icon" :src="CopyClipboardIcon" alt="" />
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<style scoped>
23+
.body {
24+
display: flex;
25+
flex: 1;
26+
justify-content: center;
27+
}
28+
29+
.saga-message {
30+
display: flex;
31+
align-items: center;
32+
}
33+
34+
.saga-message-image {
35+
display: block;
36+
margin: auto;
37+
}
38+
39+
.saga-message-title {
40+
text-align: center;
41+
margin: 0.2rem 0 0;
42+
font-size: 1.5rem;
43+
color: #cccccc;
44+
}
45+
46+
.saga-message-box {
47+
margin-top: 1rem;
48+
padding: 1.5rem 2rem;
49+
color: #535353;
50+
font-size: 1rem;
51+
font-weight: 900;
52+
text-align: center;
53+
background-color: #e4e4e4;
54+
}
55+
56+
.saga-message-text {
57+
margin: 0;
58+
}
59+
60+
.saga-message-link {
61+
font-family: "Courier New", Courier, monospace;
62+
color: #aaaaaa;
63+
}
64+
65+
.saga-message-icon {
66+
display: inline-block;
67+
margin-left: 0.5rem;
68+
width: 1.5rem;
69+
}
70+
</style>

0 commit comments

Comments
 (0)