Skip to content

Commit e24e085

Browse files
PhilBastianPhilBastian
committed
implement messagesstore to perform servicecontrol API calls
1 parent b958858 commit e24e085

File tree

5 files changed

+376
-420
lines changed

5 files changed

+376
-420
lines changed

‎src/Frontend/src/components/failedmessages/DeletedMessages.vue‎

Lines changed: 36 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,29 @@
11
<script setup lang="ts">
2-
import { onMounted, onUnmounted, ref, watch } from "vue";
2+
import { onMounted, ref, watch } from "vue";
33
import { useShowToast } from "../../composables/toast";
4-
import { onBeforeRouteLeave, useRoute } from "vue-router";
5-
import { useCookies } from "vue3-cookies";
4+
import { onBeforeRouteLeave } from "vue-router";
65
import LicenseNotExpired from "../../components/LicenseNotExpired.vue";
76
import ServiceControlAvailable from "../ServiceControlAvailable.vue";
87
import MessageList, { IMessageList } from "./MessageList.vue";
98
import ConfirmDialog from "../ConfirmDialog.vue";
109
import PaginationStrip from "../../components/PaginationStrip.vue";
11-
import moment from "moment";
12-
import { ExtendedFailedMessage } from "@/resources/FailedMessage";
10+
import { FailedMessageStatus } from "@/resources/FailedMessage";
1311
import { TYPE } from "vue-toastification";
14-
import FailureGroup from "@/resources/FailureGroup";
1512
import FAIcon from "@/components/FAIcon.vue";
1613
import { faArrowRotateRight } from "@fortawesome/free-solid-svg-icons";
17-
import { useServiceControlStore } from "@/stores/ServiceControlStore";
18-
import { useConfigurationStore } from "@/stores/ConfigurationStore";
1914
import { storeToRefs } from "pinia";
15+
import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
16+
import { DeletedPeriodOption, useMessagesStore } from "@/stores/MessagesStore";
17+
import LoadingSpinner from "../LoadingSpinner.vue";
2018
21-
let pollingFaster = false;
22-
let refreshInterval: number | undefined;
23-
const perPage = 50;
19+
const loading = ref(false);
20+
const { autoRefresh, isRefreshing, updateInterval } = useStoreAutoRefresh("messagesStore", useMessagesStore, 5000);
21+
const { store } = autoRefresh();
22+
const { messages, groupId, groupName, totalCount, pageNumber, selectedPeriod } = storeToRefs(store);
2423
25-
const route = useRoute();
26-
const groupId = ref<string>(route.params.groupId as string);
27-
const groupName = ref("");
28-
const pageNumber = ref(1);
29-
const totalCount = ref(0);
30-
const cookies = useCookies().cookies;
31-
const periodOptions = ["All Deleted", "Deleted in the last 2 Hours", "Deleted in the last 1 Day", "Deleted in the last 7 days"] as const;
32-
type PeriodOption = (typeof periodOptions)[number];
33-
const selectedPeriod = ref<PeriodOption>("Deleted in the last 7 days");
24+
let pollingFaster = false;
3425
const showConfirmRestore = ref(false);
3526
const messageList = ref<IMessageList | undefined>();
36-
const messages = ref<ExtendedFailedMessage[]>([]);
37-
38-
watch(pageNumber, () => loadMessages());
39-
40-
const configurationStore = useConfigurationStore();
41-
const { configuration } = storeToRefs(configurationStore);
42-
const serviceControlStore = useServiceControlStore();
43-
44-
function loadMessages() {
45-
let startDate = new Date(0);
46-
const endDate = new Date();
47-
48-
switch (selectedPeriod.value) {
49-
case "All Deleted":
50-
startDate = new Date();
51-
startDate.setHours(startDate.getHours() - 24 * 365);
52-
break;
53-
case "Deleted in the last 2 Hours":
54-
startDate = new Date();
55-
startDate.setHours(startDate.getHours() - 2);
56-
break;
57-
case "Deleted in the last 1 Day":
58-
startDate = new Date();
59-
startDate.setHours(startDate.getHours() - 24);
60-
break;
61-
case "Deleted in the last 7 days":
62-
startDate = new Date();
63-
startDate.setHours(startDate.getHours() - 24 * 7);
64-
break;
65-
}
66-
return loadPagedMessages(groupId.value, pageNumber.value, "", "", startDate.toISOString(), endDate.toISOString());
67-
}
68-
69-
async function loadGroupDetails(groupId: string) {
70-
const [, data] = await serviceControlStore.fetchTypedFromServiceControl<FailureGroup>(`archive/groups/id/${groupId}`);
71-
groupName.value = data.title;
72-
}
73-
74-
function loadPagedMessages(groupId?: string, page: number = 1, sortBy: string = "modified", direction: string = "desc", startDate: string = new Date(0).toISOString(), endDate: string = new Date().toISOString()) {
75-
const dateRange = startDate + "..." + endDate;
76-
let loadGroupDetailsPromise;
77-
if (groupId && !groupName.value) {
78-
loadGroupDetailsPromise = loadGroupDetails(groupId);
79-
}
80-
81-
async function loadDelMessages() {
82-
try {
83-
const [response, data] = await serviceControlStore.fetchTypedFromServiceControl<ExtendedFailedMessage[]>(
84-
`${groupId ? `recoverability/groups/${groupId}/` : ""}errors?status=archived&page=${page}&per_page=${perPage}&sort=${sortBy}&direction=${direction}&modified=${dateRange}`
85-
);
86-
87-
totalCount.value = parseInt(response.headers.get("Total-Count") ?? "0");
88-
89-
if (messages.value.length && data.length) {
90-
// merge the previously selected messages into the new list so we can replace them
91-
messages.value.forEach((previousMessage) => {
92-
const receivedMessage = data.find((m) => m.id === previousMessage.id);
93-
if (receivedMessage) {
94-
if (previousMessage.last_modified === receivedMessage.last_modified) {
95-
receivedMessage.retryInProgress = previousMessage.retryInProgress;
96-
receivedMessage.deleteInProgress = previousMessage.deleteInProgress;
97-
}
98-
99-
receivedMessage.selected = previousMessage.selected;
100-
}
101-
});
102-
}
103-
messages.value = updateMessagesScheduledDeletionDate(data);
104-
} catch (err) {
105-
console.log(err);
106-
const result = {
107-
message: "error",
108-
};
109-
return result;
110-
}
111-
}
112-
113-
const loadDelMessagesPromise = loadDelMessages();
114-
115-
if (loadGroupDetailsPromise) {
116-
return Promise.all([loadGroupDetailsPromise, loadDelMessagesPromise]);
117-
}
118-
119-
return loadDelMessagesPromise;
120-
}
121-
122-
function updateMessagesScheduledDeletionDate(messages: ExtendedFailedMessage[]) {
123-
//check deletion time
124-
messages.forEach((message) => {
125-
message.error_retention_period = moment.duration(configuration.value?.data_retention.error_retention_period).asHours();
126-
const countdown = moment(message.last_modified).add(message.error_retention_period, "hours");
127-
message.delete_soon = countdown < moment();
128-
message.deleted_in = countdown.format();
129-
});
130-
return messages;
131-
}
13227
13328
function numberSelected() {
13429
return messageList.value?.getSelectedMessages()?.length ?? 0;
@@ -147,69 +42,48 @@ function isAnythingSelected() {
14742
}
14843
14944
async function restoreSelectedMessages() {
150-
changeRefreshInterval(1000);
45+
// We're starting a restore, poll more frequently
46+
pollingFaster = true;
47+
updateInterval(1000);
15148
const selectedMessages = messageList.value?.getSelectedMessages() ?? [];
15249
selectedMessages.forEach((m) => (m.restoreInProgress = true));
15350
useShowToast(TYPE.INFO, "Info", `restoring ${selectedMessages.length} messages...`);
15451
155-
await serviceControlStore.patchToServiceControl(
156-
"errors/unarchive",
157-
selectedMessages.map((m) => m.id)
158-
);
52+
await store.restoreById(selectedMessages.map((m) => m.id));
15953
messageList.value?.deselectAll();
16054
}
16155
162-
function periodChanged(period: PeriodOption) {
163-
selectedPeriod.value = period;
164-
cookies.set("all_deleted_messages_period", period);
165-
166-
loadMessages();
56+
async function periodChanged(period: DeletedPeriodOption) {
57+
loading.value = true;
58+
await store.setPeriod(period);
59+
loading.value = false;
16760
}
16861
16962
function isRestoreInProgress() {
17063
return messages.value.some((message) => message.restoreInProgress);
17164
}
17265
173-
function changeRefreshInterval(milliseconds: number) {
174-
if (refreshInterval != null) {
175-
window.clearInterval(refreshInterval);
176-
}
177-
178-
refreshInterval = window.setInterval(() => {
179-
// If we're currently polling at 5 seconds and there is a restore in progress, then change the polling interval to poll every 1 second
180-
if (!pollingFaster && isRestoreInProgress()) {
181-
changeRefreshInterval(1000);
182-
pollingFaster = true;
183-
} else if (pollingFaster && !isRestoreInProgress()) {
184-
// if we're currently polling every 1 second but all restores are done, change polling frequency back to every 5 seconds
185-
changeRefreshInterval(5000);
186-
pollingFaster = false;
187-
}
188-
189-
loadMessages();
190-
}, milliseconds);
191-
}
192-
19366
onBeforeRouteLeave(() => {
19467
groupId.value = "";
19568
groupName.value = "";
19669
});
19770
198-
onUnmounted(() => {
199-
if (refreshInterval != null) {
200-
window.clearInterval(refreshInterval);
71+
watch(isRefreshing, () => {
72+
// If we're currently polling at 5 seconds and there is a restore in progress, then change the polling interval to poll every 1 second
73+
if (!pollingFaster && isRestoreInProgress()) {
74+
pollingFaster = true;
75+
updateInterval(1000);
76+
} else if (pollingFaster && !isRestoreInProgress()) {
77+
// if we're currently polling every 1 second but all restores are done, change polling frequency back to every 5 seconds
78+
pollingFaster = false;
79+
updateInterval(5000);
20180
}
20281
});
20382
204-
onMounted(() => {
205-
let cookiePeriod = cookies.get("all_deleted_messages_period") as PeriodOption;
206-
if (!cookiePeriod) {
207-
cookiePeriod = periodOptions[periodOptions.length - 1]; //default is last 7 days
208-
}
209-
selectedPeriod.value = cookiePeriod;
210-
loadMessages();
211-
212-
changeRefreshInterval(5000);
83+
onMounted(async () => {
84+
loading.value = true;
85+
await store.setMessageStatus(FailedMessageStatus.Archived);
86+
loading.value = false;
21387
});
21488
</script>
21589

@@ -241,7 +115,7 @@ onMounted(() => {
241115
<span class="caret"></span>
242116
</button>
243117
<ul class="dropdown-menu">
244-
<li v-for="(period, index) in periodOptions" :key="index">
118+
<li v-for="(period, index) in store.deletedPeriodOptions" :key="index">
245119
<a @click.prevent="periodChanged(period)">{{ period }}</a>
246120
</li>
247121
</ul>
@@ -250,11 +124,12 @@ onMounted(() => {
250124
</div>
251125
<div class="row">
252126
<div class="col-12">
253-
<MessageList :messages="messages" ref="messageList"></MessageList>
127+
<LoadingSpinner v-if="messages.length === 0 && (loading || isRefreshing)" />
128+
<MessageList v-else :messages="messages" ref="messageList"></MessageList>
254129
</div>
255130
</div>
256131
<div class="row" v-if="messages.length > 0">
257-
<PaginationStrip v-model="pageNumber" :total-count="totalCount" :items-per-page="perPage" />
132+
<PaginationStrip v-model="pageNumber" :total-count="totalCount" :items-per-page="store.perPage" />
258133
</div>
259134
<Teleport to="#modalDisplay">
260135
<ConfirmDialog

0 commit comments

Comments
 (0)