Skip to content

Commit 0905e39

Browse files
johnsimonsjohnsimons
authored
Merge pull request #2332 from Particular/john/fix-refresh
Fixes issue with refresh and reseting tabs
2 parents 5eae586 + 86b41c8 commit 0905e39

File tree

3 files changed

+108
-62
lines changed

3 files changed

+108
-62
lines changed

‎src/Frontend/src/components/LoadingOverlay.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="loading-overlay">
3+
<div class="spinner"></div>
4+
</div>
5+
</template>
6+
7+
<style scoped>
8+
.loading-overlay {
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
width: 100%;
13+
height: 100%;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
cursor: wait;
18+
z-index: 1000; /* Make sure it overlays other elements */
19+
}
20+
21+
.spinner {
22+
width: 50px;
23+
height: 50px;
24+
border: 5px solid rgba(0, 0, 0, 0.3);
25+
border-top: 5px solid white;
26+
border-radius: 50%;
27+
animation: spin 1s linear infinite;
28+
}
29+
30+
@keyframes spin {
31+
from {
32+
transform: rotate(0deg);
33+
}
34+
to {
35+
transform: rotate(360deg);
36+
}
37+
}
38+
</style>

‎src/Frontend/src/components/TabsLayout.vue‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
<script setup lang="ts">
2-
import { ref, type Component, type DefineComponent, shallowRef } from "vue";
2+
import { ref, type Component, type DefineComponent, shallowRef, watch } from "vue";
33
44
interface Tab {
55
text: string;
66
component: Component | DefineComponent;
77
}
88
99
const props = defineProps<{ tabs: Tab[] }>();
10-
const activePanel = ref(0);
10+
const activePanel = ref(props.tabs[0].text);
1111
const activeComponent = shallowRef(props.tabs[0].component);
1212
13-
function togglePanel(panelIndex: number) {
14-
activePanel.value = panelIndex;
15-
activeComponent.value = props.tabs[panelIndex].component;
13+
function togglePanel(panel: string) {
14+
activePanel.value = panel;
15+
activeComponent.value = props.tabs.find((value) => value.text === panel)!.component;
1616
}
17+
18+
watch(
19+
() => props.tabs,
20+
(newTabs) => {
21+
// Reset selected tab to first one if the previous selected tab no longer exists
22+
if (!newTabs.find((value) => value.text === activePanel.value)) {
23+
togglePanel(newTabs[0].text);
24+
}
25+
}
26+
);
1727
</script>
1828

1929
<template>
2030
<div class="nav tabs msg-tabs">
21-
<h5 :class="{ active: activePanel === index }" class="nav-item" @click.prevent="togglePanel(index)" v-for="(tab, index) in props.tabs" :key="tab.text">
31+
<h5 :class="{ active: activePanel === tab.text }" class="nav-item" @click.prevent="togglePanel(tab.text)" v-for="tab in props.tabs" :key="tab.text">
2232
<a href="#">{{ tab.text }}</a>
2333
</h5>
2434
</div>

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

Lines changed: 54 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import RestoreMessageButton from "@/components/messages2/RestoreMessageButton.vu
1616
import RetryMessageButton from "@/components/messages2/RetryMessageButton.vue";
1717
import EditAndRetryButton from "@/components/messages2/EditAndRetryButton.vue";
1818
import ExportMessageButton from "@/components/messages2/ExportMessageButton.vue";
19-
import LoadingSpinner from "@/components/LoadingSpinner.vue";
2019
import TabsLayout from "@/components/TabsLayout.vue";
2120
import { storeToRefs } from "pinia";
2221
import MetadataLabel from "@/components/messages2/MetadataLabel.vue";
22+
import LoadingOverlay from "@/components/LoadingOverlay.vue";
2323
2424
const route = useRoute();
2525
const id = computed(() => route.params.id as string);
@@ -84,68 +84,66 @@ watch(
8484
<no-data v-if="state.not_found" title="message failures" message="Could not find message. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl."></no-data>
8585
<no-data v-else-if="state.failed_to_load" title="message failures" message="An error occurred while trying to load the message. Please check the ServiceControl logs to learn what the issue is."></no-data>
8686
<template v-else>
87-
<LoadingSpinner v-if="state.loading ?? false" />
88-
<template v-else>
89-
<div class="row">
90-
<div class="col-sm-12 no-side-padding">
91-
<div class="active break group-title">
92-
<h1 class="message-type-title">{{ state.data.message_type }}</h1>
93-
</div>
87+
<LoadingOverlay v-if="state.loading ?? false" />
88+
<div class="row">
89+
<div class="col-sm-12 no-side-padding">
90+
<div class="active break group-title">
91+
<h1 class="message-type-title">{{ state.data.message_type }}</h1>
9492
</div>
9593
</div>
96-
<div class="row">
97-
<div class="col-sm-12 no-side-padding">
98-
<div class="metadata group-message-count message-metadata">
99-
<MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being added to the retries queue" type="info" text="Requesting retry..." />
100-
<MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is enqueued to be retried" type="info" text="Waiting for retry" />
101-
<MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
102-
<MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />
103-
<MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />
104-
<MetadataLabel v-if="state.data.failure_status.resolved" tooltip="Message was processed successfully" type="warning" text="Processed" />
105-
<MetadataLabel
106-
v-if="state.data.failure_metadata.number_of_processing_attempts !== undefined && state.data.failure_metadata.number_of_processing_attempts > 1"
107-
:tooltip="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
108-
type="important"
109-
:text="`${(state.data.failure_metadata.number_of_processing_attempts ?? 0) - 1} Retry Failures`"
110-
/>
111-
<template v-if="state.data.failure_metadata.edited">
112-
<MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
113-
<span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
114-
<i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of) }">View previous version</RouterLink>
115-
</span>
116-
</template>
117-
<span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
118-
<span v-else class="metadata"><i class="fa fa-clock-o"></i> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
119-
<template v-if="state.data.receiving_endpoint">
120-
<span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
121-
<span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ state.data.receiving_endpoint.host }}</span>
122-
</template>
123-
<span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>
124-
<template v-if="state.data.failure_status.archived">
125-
<span class="metadata"><i class="fa fa-clock-o"></i> Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></span>
126-
<span class="metadata danger" v-if="state.data.failure_status.delete_soon"><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: immediately</span>
127-
<span class="metadata danger" v-else><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></span>
128-
</template>
129-
</div>
94+
</div>
95+
<div class="row">
96+
<div class="col-sm-12 no-side-padding">
97+
<div class="metadata group-message-count message-metadata">
98+
<MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being added to the retries queue" type="info" text="Requesting retry..." />
99+
<MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is enqueued to be retried" type="info" text="Waiting for retry" />
100+
<MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
101+
<MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />
102+
<MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />
103+
<MetadataLabel v-if="state.data.failure_status.resolved" tooltip="Message was processed successfully" type="warning" text="Processed" />
104+
<MetadataLabel
105+
v-if="state.data.failure_metadata.number_of_processing_attempts !== undefined && state.data.failure_metadata.number_of_processing_attempts > 1"
106+
:tooltip="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
107+
type="important"
108+
:text="`${(state.data.failure_metadata.number_of_processing_attempts ?? 0) - 1} Retry Failures`"
109+
/>
110+
<template v-if="state.data.failure_metadata.edited">
111+
<MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
112+
<span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
113+
<i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of) }">View previous version</RouterLink>
114+
</span>
115+
</template>
116+
<span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
117+
<span v-else class="metadata"><i class="fa fa-clock-o"></i> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
118+
<template v-if="state.data.receiving_endpoint">
119+
<span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
120+
<span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ state.data.receiving_endpoint.host }}</span>
121+
</template>
122+
<span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>
123+
<template v-if="state.data.failure_status.archived">
124+
<span class="metadata"><i class="fa fa-clock-o"></i> Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></span>
125+
<span class="metadata danger" v-if="state.data.failure_status.delete_soon"><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: immediately</span>
126+
<span class="metadata danger" v-else><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></span>
127+
</template>
130128
</div>
131129
</div>
132-
<div class="row">
133-
<div class="col-sm-12 no-side-padding">
134-
<div class="btn-toolbar message-toolbar">
135-
<DeleteMessageButton />
136-
<RestoreMessageButton />
137-
<RetryMessageButton />
138-
<EditAndRetryButton />
139-
<ExportMessageButton />
140-
</div>
130+
</div>
131+
<div class="row">
132+
<div class="col-sm-12 no-side-padding">
133+
<div class="btn-toolbar message-toolbar">
134+
<DeleteMessageButton />
135+
<RestoreMessageButton />
136+
<RetryMessageButton />
137+
<EditAndRetryButton />
138+
<ExportMessageButton />
141139
</div>
142140
</div>
143-
<div class="row">
144-
<div class="col-sm-12 no-side-padding">
145-
<TabsLayout :tabs="tabs" />
146-
</div>
141+
</div>
142+
<div class="row">
143+
<div class="col-sm-12 no-side-padding">
144+
<TabsLayout :tabs="tabs" />
147145
</div>
148-
</template>
146+
</div>
149147
</template>
150148
</section>
151149
</div>

0 commit comments

Comments
 (0)