Skip to content

Commit a458b47

Browse files
jasontaylordevjasontaylordev
authored
Merge pull request #2481 from Particular/new-message-status-component
Refactor AuditList component to use new MessageStatusIcon component
2 parents f6ad2ab + f87f99e commit a458b47

File tree

3 files changed

+185
-164
lines changed

3 files changed

+185
-164
lines changed

‎src/Frontend/src/components/audit/AuditList.vue‎

Lines changed: 2 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
<script setup lang="ts">
2-
import routeLinks from "@/router/routeLinks";
32
import { FieldNames, useAuditStore } from "@/stores/AuditStore";
43
import { storeToRefs } from "pinia";
5-
import Message, { MessageStatus } from "@/resources/Message";
64
import { useRoute, useRouter } from "vue-router";
75
import ResultsCount from "@/components/ResultsCount.vue";
8-
import { dotNetTimespanToMilliseconds, formatDotNetTimespan } from "@/composables/formatUtils";
96
import FiltersPanel from "@/components/audit/FiltersPanel.vue";
7+
import AuditListItem from "@/components/audit/AuditListItem.vue";
108
import { onBeforeMount, onUnmounted, ref, watch } from "vue";
119
import RefreshConfig from "../RefreshConfig.vue";
1210
import useAutoRefresh from "@/composables/autoRefresh";
@@ -36,58 +34,6 @@ onUnmounted(() => {
3634
dataRetriever.updateTimeout(null);
3735
});
3836
39-
function statusToName(messageStatus: MessageStatus) {
40-
switch (messageStatus) {
41-
case MessageStatus.Successful:
42-
return "Successful";
43-
case MessageStatus.ResolvedSuccessfully:
44-
return "Successful after retries";
45-
case MessageStatus.Failed:
46-
return "Failed";
47-
case MessageStatus.ArchivedFailure:
48-
return "Failed message deleted";
49-
case MessageStatus.RepeatedFailure:
50-
return "Repeated Failures";
51-
case MessageStatus.RetryIssued:
52-
return "Retry requested";
53-
}
54-
}
55-
56-
function statusToIcon(messageStatus: MessageStatus) {
57-
switch (messageStatus) {
58-
case MessageStatus.Successful:
59-
return "fa successful";
60-
case MessageStatus.ResolvedSuccessfully:
61-
return "fa resolved-successfully";
62-
case MessageStatus.Failed:
63-
return "fa failed";
64-
case MessageStatus.ArchivedFailure:
65-
return "fa archived";
66-
case MessageStatus.RepeatedFailure:
67-
return "fa repeated-failure";
68-
case MessageStatus.RetryIssued:
69-
return "fa retry-issued";
70-
}
71-
}
72-
73-
function hasWarning(message: Message) {
74-
return (
75-
message.status === MessageStatus.ResolvedSuccessfully || //
76-
dotNetTimespanToMilliseconds(message.critical_time) < 0 ||
77-
dotNetTimespanToMilliseconds(message.processing_time) < 0 ||
78-
dotNetTimespanToMilliseconds(message.delivery_time) < 0
79-
);
80-
}
81-
82-
function navigateToMessage(message: Message) {
83-
const query = router.currentRoute.value.query;
84-
85-
router.push({
86-
path: message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id),
87-
query: { ...query, ...{ back: route.path } },
88-
});
89-
}
90-
9137
const firstLoad = ref(true);
9238
9339
onBeforeMount(() => {
@@ -167,20 +113,7 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
167113
<div class="row results-table">
168114
<LoadingSpinner v-if="firstLoad" />
169115
<template v-for="message in messages" :key="message.id">
170-
<div class="item" @click="navigateToMessage(message)">
171-
<div class="status">
172-
<div class="status-container" v-tippy="{ content: statusToName(message.status) }">
173-
<div class="status-icon" :class="statusToIcon(message.status)"></div>
174-
<div v-if="hasWarning(message)" class="warning"></div>
175-
</div>
176-
</div>
177-
<div class="message-id">{{ message.message_id }}</div>
178-
<div class="message-type">{{ message.message_type }}</div>
179-
<div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(message.time_sent).toLocaleString() }}</div>
180-
<div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(message.critical_time) }}</div>
181-
<div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(message.processing_time) }}</div>
182-
<div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(message.delivery_time) }}</div>
183-
</div>
116+
<AuditListItem :message="message" />
184117
</template>
185118
</div>
186119
</div>
@@ -204,99 +137,4 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
204137
margin-bottom: 5rem;
205138
background-color: #ffffff;
206139
}
207-
.item {
208-
padding: 0.3rem 0.2rem;
209-
border: 1px solid #ffffff;
210-
border-bottom: 1px solid #eee;
211-
display: grid;
212-
grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
213-
grid-template-rows: 1fr 1fr;
214-
gap: 0.375rem;
215-
grid-template-areas:
216-
"status message-type message-type message-type time-sent"
217-
"status message-id processing-time critical-time delivery-time";
218-
}
219-
.item:not(:first-child) {
220-
border-top-color: #eee;
221-
}
222-
.item:hover {
223-
border-color: #00a3c4;
224-
background-color: #edf6f7;
225-
cursor: pointer;
226-
}
227-
.label-name {
228-
margin-right: 0.25rem;
229-
color: #777f7f;
230-
}
231-
.status {
232-
grid-area: status;
233-
}
234-
.message-id {
235-
grid-area: message-id;
236-
}
237-
.time-sent {
238-
grid-area: time-sent;
239-
}
240-
.message-type {
241-
grid-area: message-type;
242-
font-weight: bold;
243-
overflow-wrap: break-word;
244-
}
245-
.processing-time {
246-
grid-area: processing-time;
247-
}
248-
.critical-time {
249-
grid-area: critical-time;
250-
}
251-
.delivery-time {
252-
grid-area: delivery-time;
253-
}
254-
.status-container {
255-
color: white;
256-
width: 1.4em;
257-
height: 1.4em;
258-
position: relative;
259-
}
260-
261-
.status-icon {
262-
background-position: center;
263-
background-repeat: no-repeat;
264-
height: 1.4em;
265-
width: 1.4em;
266-
}
267-
268-
.warning {
269-
background-image: url("@/assets/warning.svg");
270-
background-position: bottom;
271-
background-repeat: no-repeat;
272-
height: 0.93em;
273-
width: 0.93em;
274-
position: absolute;
275-
right: 0;
276-
bottom: 0;
277-
}
278-
279-
.successful {
280-
background-image: url("@/assets/status_successful.svg");
281-
}
282-
283-
.resolved-successfully {
284-
background-image: url("@/assets/status_resolved.svg");
285-
}
286-
287-
.failed {
288-
background-image: url("@/assets/status_failed.svg");
289-
}
290-
291-
.archived {
292-
background-image: url("@/assets/status_archived.svg");
293-
}
294-
295-
.repeated-failure {
296-
background-image: url("@/assets/status_repeated_failed.svg");
297-
}
298-
299-
.retry-issued {
300-
background-image: url("@/assets/status_retry_issued.svg");
301-
}
302140
</style>

‎src/Frontend/src/components/audit/AuditListItem.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup lang="ts">
2+
import routeLinks from "@/router/routeLinks";
3+
import Message, { MessageStatus } from "@/resources/Message";
4+
import { defineProps } from "vue";
5+
import { formatDotNetTimespan } from "@/composables/formatUtils";
6+
import { useRoute, useRouter } from "vue-router";
7+
import MessageStatusIcon from "@/components/audit/MessageStatusIcon.vue";
8+
9+
const route = useRoute();
10+
const router = useRouter();
11+
12+
const props = defineProps<{
13+
message: Message;
14+
}>();
15+
16+
function navigateToMessage(message: Message) {
17+
const query = router.currentRoute.value.query;
18+
19+
router.push({
20+
path: message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id),
21+
query: { ...query, ...{ back: route.path } },
22+
});
23+
}
24+
</script>
25+
26+
<template>
27+
<div class="item" @click="navigateToMessage(props.message)">
28+
<div class="status">
29+
<MessageStatusIcon :message="props.message" />
30+
</div>
31+
<div class="message-id">{{ props.message.message_id }}</div>
32+
<div class="message-type">{{ props.message.message_type }}</div>
33+
<div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</div>
34+
<div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
35+
<div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
36+
<div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
37+
</div>
38+
</template>
39+
40+
<style scoped>
41+
.item {
42+
padding: 0.3rem 0.2rem;
43+
border: 1px solid #ffffff;
44+
border-bottom: 1px solid #eee;
45+
display: grid;
46+
grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
47+
grid-template-rows: 1fr 1fr;
48+
gap: 0.375rem;
49+
grid-template-areas:
50+
"status message-type message-type message-type time-sent"
51+
"status message-id processing-time critical-time delivery-time";
52+
}
53+
.item:not(:first-child) {
54+
border-top-color: #eee;
55+
}
56+
.item:hover {
57+
border-color: #00a3c4;
58+
background-color: #edf6f7;
59+
cursor: pointer;
60+
}
61+
.label-name {
62+
margin-right: 0.25rem;
63+
color: #777f7f;
64+
}
65+
.status {
66+
grid-area: status;
67+
}
68+
.message-id {
69+
grid-area: message-id;
70+
}
71+
.time-sent {
72+
grid-area: time-sent;
73+
}
74+
.message-type {
75+
grid-area: message-type;
76+
font-weight: bold;
77+
overflow-wrap: break-word;
78+
}
79+
.processing-time {
80+
grid-area: processing-time;
81+
}
82+
.critical-time {
83+
grid-area: critical-time;
84+
}
85+
.delivery-time {
86+
grid-area: delivery-time;
87+
}
88+
</style>

‎src/Frontend/src/components/audit/MessageStatusIcon.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script setup lang="ts">
2+
import { dotNetTimespanToMilliseconds } from "@/composables/formatUtils";
3+
import Message, { MessageStatus } from "@/resources/Message";
4+
import { defineProps, computed } from "vue";
5+
6+
const props = defineProps<{
7+
message: Message;
8+
}>();
9+
10+
const hasWarning = computed(() => {
11+
return (
12+
props.message.status === MessageStatus.ResolvedSuccessfully ||
13+
dotNetTimespanToMilliseconds(props.message.critical_time) < 0 ||
14+
dotNetTimespanToMilliseconds(props.message.processing_time) < 0 ||
15+
dotNetTimespanToMilliseconds(props.message.delivery_time) < 0
16+
);
17+
});
18+
19+
const statusInfo = computed(() => {
20+
switch (props.message.status) {
21+
case MessageStatus.Successful:
22+
return { name: "Successful", icon: "fa successful" };
23+
case MessageStatus.ResolvedSuccessfully:
24+
return { name: "Successful after retries", icon: "fa resolved-successfully" };
25+
case MessageStatus.Failed:
26+
return { name: "Failed", icon: "fa failed" };
27+
case MessageStatus.ArchivedFailure:
28+
return { name: "Failed message deleted", icon: "fa archived" };
29+
case MessageStatus.RepeatedFailure:
30+
return { name: "Repeated failures", icon: "fa repeated-failure" };
31+
case MessageStatus.RetryIssued:
32+
return { name: "Retry requested", icon: "fa retry-issued" };
33+
default:
34+
return { name: "Unknown status", icon: "fa fa-question-circle" };
35+
}
36+
});
37+
</script>
38+
39+
<template>
40+
<div class="status-container" v-tippy="{ content: statusInfo.name }">
41+
<div class="status-icon" :class="statusInfo.icon"></div>
42+
<div v-if="hasWarning" class="warning"></div>
43+
</div>
44+
</template>
45+
46+
<style scoped>
47+
.status-container {
48+
color: white;
49+
width: 1.4em;
50+
height: 1.4em;
51+
position: relative;
52+
}
53+
54+
.status-icon {
55+
background-position: center;
56+
background-repeat: no-repeat;
57+
height: 1.4em;
58+
width: 1.4em;
59+
}
60+
61+
.warning {
62+
background-image: url("@/assets/warning.svg");
63+
background-position: bottom;
64+
background-repeat: no-repeat;
65+
height: 0.93em;
66+
width: 0.93em;
67+
position: absolute;
68+
right: 0;
69+
bottom: 0;
70+
}
71+
72+
.successful {
73+
background-image: url("@/assets/status_successful.svg");
74+
}
75+
76+
.resolved-successfully {
77+
background-image: url("@/assets/status_resolved.svg");
78+
}
79+
80+
.failed {
81+
background-image: url("@/assets/status_failed.svg");
82+
}
83+
84+
.archived {
85+
background-image: url("@/assets/status_archived.svg");
86+
}
87+
88+
.repeated-failure {
89+
background-image: url("@/assets/status_repeated_failed.svg");
90+
}
91+
92+
.retry-issued {
93+
background-image: url("@/assets/status_retry_issued.svg");
94+
}
95+
</style>

0 commit comments

Comments
 (0)