Skip to content

Commit 8f66d83

Browse files
johnsimonsjohnsimons
committed
Changing to use storeToRefs
1 parent 307a8fe commit 8f66d83

File tree

8 files changed

+49
-34
lines changed

8 files changed

+49
-34
lines changed

‎src/Frontend/src/components/messages/BodyView.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,28 @@ import CodeEditor from "@/components/CodeEditor.vue";
44
import parseContentType from "@/composables/contentTypeParser";
55
import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
66
import LoadingSpinner from "@/components/LoadingSpinner.vue";
7+
import { storeToRefs } from "pinia";
78
89
const store = useMessageViewStore();
10+
const { body: bodyState, state } = storeToRefs(store);
11+
912
watch(
10-
() => store.state.data.body_url,
13+
() => state.value.data.body_url,
1114
async () => {
1215
await store.downloadBody();
1316
},
1417
{ immediate: true }
1518
);
16-
const contentType = computed(() => parseContentType(store.body.data.content_type));
17-
const body = computed(() => store.body.data.value);
19+
const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
20+
const body = computed(() => bodyState.value.data.value);
1821
</script>
1922

2023
<template>
21-
<div v-if="store.body.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
22-
<div v-else-if="store.body.failed_to_load" class="alert alert-info">Message body unavailable.</div>
23-
<LoadingSpinner v-else-if="store.body.loading" />
24+
<div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
25+
<div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
26+
<LoadingSpinner v-else-if="bodyState.loading" />
2427
<CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
25-
<div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ store.body.data.content_type }}" is not supported.</div>
28+
<div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
2629
</template>
2730

2831
<style scoped></style>

‎src/Frontend/src/components/messages/DeleteMessageButton.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@ import { computed, ref } from "vue";
55
import { showToastAfterOperation } from "@/composables/toast.ts";
66
import { TYPE } from "vue-toastification";
77
import { MessageStatus } from "@/resources/Message.ts";
8+
import { storeToRefs } from "pinia";
89
910
const store = useMessageViewStore();
11+
const { state } = storeToRefs(store);
1012
const isConfirmDialogVisible = ref(false);
1113
12-
const failureStatus = computed(() => store.state.data.failure_status);
14+
const failureStatus = computed(() => state.value.data.failure_status);
1315
const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.resolved);
14-
const isVisible = computed(() => !failureStatus.value.archived && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
16+
const isVisible = computed(() => !failureStatus.value.archived && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
1517
1618
const handleConfirm = async () => {
1719
isConfirmDialogVisible.value = false;
1820
19-
const message = `Deleting the message ${store.state.data.id} ...`;
21+
const message = `Deleting the message ${state.value.data.id} ...`;
2022
await showToastAfterOperation(store.archiveMessage, TYPE.INFO, "Info", message);
21-
store.state.data.failure_status.archiving = true;
23+
state.value.data.failure_status.archiving = true;
2224
};
2325
</script>
2426

‎src/Frontend/src/components/messages/EditAndRetryButton.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@ import { showToastAfterOperation } from "@/composables/toast.ts";
55
import { TYPE } from "vue-toastification";
66
import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
77
import { MessageStatus } from "@/resources/Message.ts";
8+
import { storeToRefs } from "pinia";
89
910
const store = useMessageViewStore();
11+
const { state } = storeToRefs(store);
1012
const isConfirmDialogVisible = ref(false);
1113
12-
const failureStatus = computed(() => store.state.data.failure_status);
14+
const failureStatus = computed(() => state.value.data.failure_status);
1315
const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
14-
const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
16+
const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
1517
const handleConfirm = async () => {
1618
isConfirmDialogVisible.value = false;
1719
18-
const message = `Retrying the edited message ${store.state.data.id} ...`;
20+
const message = `Retrying the edited message ${state.value.data.id} ...`;
1921
await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
20-
store.state.data.failure_status.retried = true;
22+
state.value.data.failure_status.retried = true;
2123
};
2224
</script>
2325

‎src/Frontend/src/components/messages/FlowDiagram.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NServiceBusHeaders } from "@/resources/Header";
88
import { Controls } from "@vue-flow/controls";
99
import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
1010
import LoadingSpinner from "@/components/LoadingSpinner.vue";
11+
import { storeToRefs } from "pinia";
1112
1213
enum MessageType {
1314
Event = "Event message",
@@ -40,6 +41,7 @@ const nodeSpacingX = 300;
4041
const nodeSpacingY = 200;
4142
4243
const store = useMessageViewStore();
44+
const { state } = storeToRefs(useMessageViewStore());
4345
4446
async function getConversation(conversationId: string) {
4547
await store.loadConversation(conversationId);
@@ -157,9 +159,9 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
157159
const elements = ref<(Node | DefaultEdge)[]>([]);
158160
159161
onMounted(async () => {
160-
if (!store.state.data.conversation_id) return;
162+
if (!state.value.data.conversation_id) return;
161163
162-
const messages = await getConversation(store.state.data.conversation_id);
164+
const messages = await getConversation(state.value.data.conversation_id);
163165
const mappedMessages = messages.map(mapMessage);
164166
165167
const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {

‎src/Frontend/src/components/messages/HeadersView.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
import CopyToClipboard from "@/components/CopyToClipboard.vue";
33
import { computed, ref } from "vue";
44
import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
5+
import { storeToRefs } from "pinia";
56
6-
const store = useMessageViewStore();
7+
const { headers } = storeToRefs(useMessageViewStore());
78
89
const hoverStates = ref<Record<number, boolean>>({});
910
const searchTerm = ref<string>("");
@@ -13,9 +14,9 @@ const toggleHover = (index: number, state: boolean) => {
1314
// Computed property to filter headers based on search term
1415
const filteredHeaders = computed(() => {
1516
if (!searchTerm.value) {
16-
return store.headers.data;
17+
return headers.value.data;
1718
}
18-
return store.headers.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
19+
return headers.value.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
1920
});
2021
</script>
2122

@@ -31,7 +32,7 @@ const filteredHeaders = computed(() => {
3132
</div>
3233
</div>
3334
</div>
34-
<table class="table" v-if="filteredHeaders.length > 0 && !store.headers.not_found">
35+
<table class="table" v-if="filteredHeaders.length > 0 && !headers.not_found">
3536
<tbody>
3637
<tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
3738
<td nowrap="nowrap">{{ header.key }}</td>
@@ -46,8 +47,8 @@ const filteredHeaders = computed(() => {
4647
</table>
4748

4849
<!-- Message if filtered list is empty -->
49-
<div v-if="filteredHeaders.length <= 0 && !store.headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
50-
<div v-if="store.headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
50+
<div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
51+
<div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
5152
</template>
5253

5354
<style scoped>

‎src/Frontend/src/components/messages/RestoreMessageButton.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@ import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
44
import { computed, ref } from "vue";
55
import { showToastAfterOperation } from "@/composables/toast.ts";
66
import { TYPE } from "vue-toastification";
7+
import { storeToRefs } from "pinia";
78
89
const store = useMessageViewStore();
10+
const { state } = storeToRefs(store);
911
const isConfirmDialogVisible = ref(false);
1012
11-
const failureStatus = computed(() => store.state.data.failure_status);
13+
const failureStatus = computed(() => state.value.data.failure_status);
1214
1315
const handleConfirm = async () => {
1416
isConfirmDialogVisible.value = false;
1517
16-
const message = `Restoring the message ${store.state.data.id} ...`;
18+
const message = `Restoring the message ${state.value.data.id} ...`;
1719
await showToastAfterOperation(store.restoreMessage, TYPE.INFO, "Info", message);
18-
store.state.data.failure_status.restoring = true;
20+
state.value.data.failure_status.restoring = true;
1921
};
2022
</script>
2123

‎src/Frontend/src/components/messages/RetryMessageButton.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@ import { computed, ref } from "vue";
55
import { showToastAfterOperation } from "@/composables/toast.ts";
66
import { TYPE } from "vue-toastification";
77
import { MessageStatus } from "@/resources/Message.ts";
8+
import { storeToRefs } from "pinia";
89
910
const store = useMessageViewStore();
11+
const { state } = storeToRefs(store);
1012
const isConfirmDialogVisible = ref(false);
1113
12-
const failureStatus = computed(() => store.state.data.failure_status);
14+
const failureStatus = computed(() => state.value.data.failure_status);
1315
const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
14-
const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
16+
const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
1517
1618
const handleConfirm = async () => {
1719
isConfirmDialogVisible.value = false;
1820
19-
const message = `Retrying the message ${store.state.data.id} ...`;
21+
const message = `Retrying the message ${state.value.data.id} ...`;
2022
await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
21-
store.state.data.failure_status.retried = true;
23+
state.value.data.failure_status.retried = true;
2224
};
2325
</script>
2426

‎src/Frontend/src/components/messages/StacktraceView.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
import CodeEditor from "@/components/CodeEditor.vue";
33
import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
44
import LoadingSpinner from "@/components/LoadingSpinner.vue";
5+
import { storeToRefs } from "pinia";
56
6-
const store = useMessageViewStore();
7+
const { state } = storeToRefs(useMessageViewStore());
78
</script>
89

910
<template>
10-
<div v-if="store.state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
11-
<LoadingSpinner v-else-if="store.state.loading" />
12-
<CodeEditor v-else :model-value="store.state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
11+
<div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
12+
<LoadingSpinner v-else-if="state.loading" />
13+
<CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
1314
</template>

0 commit comments

Comments
 (0)