Improve Alert History table

runtime/queries/metricsview.go

@@ -400,7 +400,7 @@ func buildLikeExpression(mv *runtimev1.MetricsViewSpec, cond *runtimev1.Conditio
 
 func buildInExpression(mv *runtimev1.MetricsViewSpec, cond *runtimev1.Condition, aliases []*runtimev1.MetricsViewComparisonMeasureAlias, dialect drivers.Dialect) (string, []any, error) {
 	if len(cond.Exprs) <= 1 {
-		return "", nil, fmt.Errorf("in/not in expression should have atleast 2 sub expressions")
+		return "", nil, fmt.Errorf("in/not in expression should have at least 2 sub expressions")
 	}
 
 	leftExpr, args, err := buildExpression(mv, cond.Exprs[0], aliases, dialect)
@@ -473,7 +473,7 @@ func buildInExpression(mv *runtimev1.MetricsViewSpec, cond *runtimev1.Condition,
 
 func buildAndOrExpressions(mv *runtimev1.MetricsViewSpec, cond *runtimev1.Condition, aliases []*runtimev1.MetricsViewComparisonMeasureAlias, dialect drivers.Dialect, joiner string) (string, []any, error) {
 	if len(cond.Exprs) == 0 {
-		return "", nil, fmt.Errorf("or/and expression should have atleast 1 sub expressions")
+		return "", nil, fmt.Errorf("or/and expression should have at least 1 sub expression")
 	}
 
 	clauses := make([]string, 0)

web-admin/src/features/alerts/history/AlertHistoryStatusChip.svelte

@@ -1,44 +1,49 @@
 <script lang="ts">
+  import { Tag } from "@rilldata/web-common/components/tag";
+  import type { Color } from "@rilldata/web-common/components/tag/Tag.svelte";
   import {
-    type V1AssertionResult,
+    V1AlertExecution,
     V1AssertionStatus,
+    type V1AssertionResult,
   } from "@rilldata/web-common/runtime-client";
 
+  export let currentExecution: V1AlertExecution;
   export let result: V1AssertionResult;
 
-  type StatusDisplay = {
+  type AssertionResultDisplay = {
     text: string;
-    textClass: string;
-    borderClass: string;
+    color: Color;
   };
-  const statusDisplays: Record<V1AssertionStatus, StatusDisplay> = {
-    [V1AssertionStatus.ASSERTION_STATUS_UNSPECIFIED]: {
-      text: "Pending",
-      textClass: "text-purple-600",
-      borderClass: "bg-purple-50 border-purple-300",
-    },
+  const assertionResultDisplays: Record<
+    V1AssertionStatus,
+    AssertionResultDisplay
+  > = {
     [V1AssertionStatus.ASSERTION_STATUS_PASS]: {
-      text: "Pass",
-      textClass: "text-green-600",
-      borderClass: "bg-green-50 border-green-300",
-    },
-    [V1AssertionStatus.ASSERTION_STATUS_ERROR]: {
-      text: "Errored",
-      textClass: "text-red-600",
-      borderClass: "bg-red-50 border-red-300",
+      text: "Not triggered",
+      color: "gray",
     },
     [V1AssertionStatus.ASSERTION_STATUS_FAIL]: {
+      text: "Triggered",
+      color: "blue",
+    },
+    [V1AssertionStatus.ASSERTION_STATUS_ERROR]: {
       text: "Failed",
-      textClass: "text-red-600",
-      borderClass: "bg-red-50 border-red-300",
+      color: "red",
+    },
+    // This should never happen
+    [V1AssertionStatus.ASSERTION_STATUS_UNSPECIFIED]: {
+      text: "Status unknown",
+      color: "amber",
     },
   };
-  $: currentStatusDisplay = statusDisplays[result.status];
+
+  $: assertionResultDisplay = assertionResultDisplays[result.status];
 </script>
 
-<div
-  class="flex space-x-1 items-center px-2 border rounded rounded-[20px] w-fit {currentStatusDisplay.borderClass}"
->
-  <span class={currentStatusDisplay.textClass}>{currentStatusDisplay.text}</span
-  >
-</div>
+{#if currentExecution}
+  <Tag color="green">Running</Tag>
+{:else}
+  <Tag color={assertionResultDisplay.color}>
+    {assertionResultDisplay.text}
+  </Tag>
+{/if}

web-admin/src/features/alerts/history/AlertHistoryTable.svelte

@@ -26,6 +26,8 @@
           alertTime: info.row.original.executionTime,
           timeZone:
             $alertQuery.data.resource.alert.spec.refreshSchedule.timeZone,
+          currentExecution:
+            $alertQuery.data.resource.alert.state.currentExecution,
           result: info.row.original.result,
         }),
     },

web-admin/src/features/alerts/history/AlertHistoryTableCompositeCell.svelte

@@ -2,21 +2,25 @@
   import AlertHistoryStatusChip from "@rilldata/web-admin/features/alerts/history/AlertHistoryStatusChip.svelte";
   import { formatRunDate } from "@rilldata/web-admin/features/scheduled-reports/tableUtils";
   import {
-    type V1AssertionResult,
     V1AssertionStatus,
+    type V1AlertExecution,
+    type V1AssertionResult,
   } from "@rilldata/web-common/runtime-client";
 
   export let alertTime: string;
   export let timeZone: string;
+  export let currentExecution: V1AlertExecution | null;
   export let result: V1AssertionResult;
+  $: console.log("result", result);
 </script>
 
 <div class="flex gap-x-2 items-center px-4 py-[10px]">
-  <div class="text-gray-700 text-sm">
-    {result.status === V1AssertionStatus.ASSERTION_STATUS_UNSPECIFIED
-      ? "Checking"
-      : "Checked"}
+  <div class="text-gray-700 text-sm flex-shrink-0">
+    {currentExecution ? "Checking" : "Checked"}
     {formatRunDate(alertTime, timeZone)}
   </div>
-  <AlertHistoryStatusChip {result} />
+  <AlertHistoryStatusChip {currentExecution} {result} />
+  {#if result.status === V1AssertionStatus.ASSERTION_STATUS_ERROR}
+    <span class="text-red-600">{result.errorMessage}</span>
+  {/if}
 </div>

web-common/src/components/tag/Tag.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-  type Color =
+<script context="module" lang="ts">
+  export type Color =
     | "gray"
     | "magenta"
     | "green"
@@ -9,7 +9,9 @@
     | "amber"
     | "blue"
     | "purple";
+</script>
 
+<script lang="ts">
   export let color: Color = "gray";
   export let height = 21;