History improvement add alert only 11 incidents stored (#640)

* Add message for max alerts hit * fix key box msg * add variable
thinkst · Jan 14, 2025 · 4116b92 · 4116b92
1 parent b654f27
commit 4116b92
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/frontend_vue/src/components/ManageToken.vue b/frontend_vue/src/components/ManageToken.vue
@@ -79,9 +79,16 @@
         <span v-else>
           This Canarytoken has been triggered
           <span class="font-bold">{{ hasAlerts }}</span>
-          time{{ hasAlerts > 1 ? 's' : '' }}</span
-        >
+          time{{ hasAlerts > 1 ? 's' : '' }}
+        </span>
       </BaseMessageBox>
+      <p
+        v-if="hasAlerts === MAX_ALERTS"
+        class="text-xs leading-4 text-grey-500 pr-[3rem] mt-8"
+      >
+        We store only the most recent <b>{{ MAX_ALERTS }}</b> alerts.
+      </p>
+
       <BaseMessageBox
         v-if="keyExposedHit"
         class="mt-32"
@@ -90,7 +97,12 @@
         @click="handleGoToExposedToken"
       >
         This Canarytoken has been found
-        <a class="font-bold" :href="keyExposedHit.public_location" target="_blank">here</a>
+        <a
+          class="font-bold"
+          :href="keyExposedHit.public_location"
+          target="_blank"
+          >here</a
+        >
         on the internet. Please replace it with a new Canarytoken.
       </BaseMessageBox>
       <DeleteTokenButton
@@ -119,6 +131,8 @@ import DeleteTokenButton from '@/components/ui/DeleteTokenButton.vue';
 import MemoDisplay from '@/components/ui/MemoDisplay.vue';
 import TokenIcon from '@/components/icons/TokenIcon.vue';
 
+const MAX_ALERTS = 11
+
 const route = useRoute();
 const router = useRouter();
 
@@ -155,7 +169,6 @@ function handleGoToExposedToken() {
   window.open(keyExposedHit.value.public_location, '_blank');
 }
 
-
 async function fetchTokenData() {
   isLoading.value = true;
 
@@ -171,7 +184,8 @@ async function fetchTokenData() {
     tokenLogoUrl.value = `token_icons/${tokenServices[getTokenType.value].icon}`;
     hasAlerts.value =
       manageTokenResponse.value.canarydrop.triggered_details.hits.length;
-    keyExposedHit.value = manageTokenResponse.value.canarydrop.key_exposed_details;
+    keyExposedHit.value =
+      manageTokenResponse.value.canarydrop.key_exposed_details;
     loadComponent();
   } catch (err: any) {
     console.log(err, 'err!');

diff --git a/frontend_vue/src/components/base/BaseMessageBox.vue b/frontend_vue/src/components/base/BaseMessageBox.vue
@@ -4,7 +4,7 @@
     :class="boxClasses"
   >
     <div
-      class="flex flex-col lg:flex-row items-center self-start flex-grow gap-16 md:gap-16 md:self-center"
+      class="flex flex-col items-center self-start flex-grow gap-16 lg:flex-row md:gap-16 md:self-center"
     >
       <AlertShieldIcon
         v-if="variant !== 'info'"
@@ -20,8 +20,9 @@
       />
       <div v-if="messages">
         <p
-          v-for="msg in messages"
-          class="text-pretty mb-4"
+          v-for="(msg, index) in messages"
+          :key="index"
+          class="mb-4 text-pretty"
         >
           {{ msg }}
         </p>