From 8f66d5feebdffe8b67944fa9da19d66217040cfb Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Mon, 22 Jun 2026 12:54:47 +0530
Subject: [PATCH] fix: refresh usage report banner when on usage tab (#12801)

---
 .../components/billings/UsageReportBanner.vue     |  4 ++++
 web/src/views/UsageTab.vue                        | 15 +++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/web/src/enterprise/components/billings/UsageReportBanner.vue b/web/src/enterprise/components/billings/UsageReportBanner.vue
index e101a001eb..4c82fd3a4b 100644
--- a/web/src/enterprise/components/billings/UsageReportBanner.vue
+++ b/web/src/enterprise/components/billings/UsageReportBanner.vue
@@ -20,6 +20,10 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
+    // Purely reactive: the banner derives everything from
+    // store.state.zoConfig.last_usage_report_ts. UsageTab refreshes that config
+    // on mount, so the banner updates on every Usage-tab visit without owning an
+    // API call itself.
     const elapsedMs = computed(() => {
       if (!store.state.zoConfig || !('last_usage_report_ts' in store.state.zoConfig)) return 0;
       const ts = store.state.zoConfig.last_usage_report_ts;
diff --git a/web/src/views/UsageTab.vue b/web/src/views/UsageTab.vue
index 6d914655af..759031fce3 100644
--- a/web/src/views/UsageTab.vue
+++ b/web/src/views/UsageTab.vue
@@ -626,6 +626,7 @@ import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import orgService from "@/services/organizations";
+import configService from "@/services/config";
 import config from "@/aws-exports";
 import { formatSizeFromMB, getImageURL } from "@/utils/zincutils";
 import CustomChartRenderer from "@/components/dashboards/panels/CustomChartRenderer.vue";
@@ -1143,9 +1144,23 @@ onMounted(() => {
   ) {
     getSummary(orgId.value);
   }
+  // Refresh config so the UsageReportBanner reflects the latest
+  // last_usage_report_ts each time the Usage tab is opened. UsageTab remounts on
+  // every visit (the home router-view is not kept-alive), and config is otherwise
+  // only fetched at app startup.
+  refreshConfig();
   window.addEventListener("themeColorChanged", onThemeColorChanged);
 });
 
+const refreshConfig = async () => {
+  try {
+    const res: any = await configService.get_config();
+    store.dispatch("setConfig", res.data);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 onUnmounted(() => {
   window.removeEventListener("themeColorChanged", onThemeColorChanged);
 });