improve alert diagram

alexewerlof · Aug 15, 2024 · 6648645 · 6648645
1 parent fe4397b
commit 6648645
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/components/alert.html b/components/alert.html
@@ -30,6 +30,9 @@
         color="--brand-red"
         offset="1">
         <tspan>Error Budget Exhausted</tspan>
+        <tspan>{{ errorBudgetBurn.eventCountL10n }} failed {{ errorBudgetBurn.eventUnitNorm }}</tspan>
+        <tspan>in {{ errorBudgetBurn.humanTime }}</tspan>
+        <tspan v-if="errorBudgetBurn.cost">costing {{ errorBudgetBurn.costL10n }}</tspan>
     </burn-event-component>
     <burn-event-component
         :width="width"
@@ -41,7 +44,7 @@
         offset="3">
         <tspan>Alert Triggers</tspan>
         <tspan>When at least {{ alertLongWindow.eventCountL10n }} failed {{ alertLongWindow.eventUnitNorm }}</tspan>
-        <tspan>occured in the last {{ alertLongWindow.humanSec }}</tspan>
+        <tspan>in the last {{ alertLongWindow.humanTime }}</tspan>
         <tspan v-if="alertLongWindow.cost">costing at least {{ alertLongWindow.costL10n }}</tspan>
     </burn-event-component>
     <burn-event-component v-if="shortWindowVisible"
@@ -54,6 +57,6 @@
         offset="2">
         <tspan>Short Window</tspan>
         <tspan>When at least {{ alertShortWindow.eventCountL10n }} failed {{ alertShortWindow.eventUnitNorm }}</tspan>
-        <tspan>occured in the last {{ alertShortWindow.humanSec }}</tspan>
+        <tspan>in the last {{ alertShortWindow.humanTime }}</tspan>
     </burn-event-component>
 </svg>
diff --git a/components/alert.js b/components/alert.js
@@ -23,6 +23,7 @@ export default {
         shortWindowVisible: Boolean,
         alertLongWindow: Object,
         alertShortWindow: Object,
+        errorBudgetBurn: Object,
     },
     components: {
         burnEventComponent,

diff --git a/index.html b/index.html
@@ -1251,7 +1251,8 @@ <h3>
                     :alert-long-window="alertLongWindow"
                     :alert-short-window="alertShortWindow"
                     :short-window-divider="shortWindowDivider"
-                    :short-window-visible="shortWindowVisible"></alert-component>
+                    :short-window-visible="shortWindowVisible"
+                    :error-budget-burn="errorBudgetBurn"></alert-component>
                 <!-- Long Window Alert Policy -->
                 <h3>
                     Alert Policy