Merge pull request #60 from dfinity/refactor

Refactor code base and types, preserving compatibility with older clients.
dfinity · Oct 28, 2024 · 3a46fee · 3a46fee
2 parents fd8af2f + ab76ab8
commit 3a46fee
Show file tree

Hide file tree

Showing 9 changed files with 625 additions and 514 deletions.
diff --git a/rollout-dashboard/frontend/src/App.svelte b/rollout-dashboard/frontend/src/App.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import url from "./lib/url.js";
-  import { type RolloutResult, rollout_query } from "./lib/stores";
+  import { rollouts_view } from "./lib/stores";
   import Rollout from "./lib/Rollout.svelte";
-  import { writable } from "svelte/store";
-  import { ButtonGroup, Button, FooterCopyright } from "flowbite-svelte";
+  import { FooterCopyright } from "flowbite-svelte";
   import {
     Footer,
     FooterLink,
@@ -13,27 +11,26 @@
   } from "flowbite-svelte";
   import { SvelteToast } from "@zerodevx/svelte-toast";
 
-  let my_rollout_query = writable({
-    rollouts: [],
-    error: "loading",
-  } as RolloutResult);
-  onMount(async () => {
-    my_rollout_query = rollout_query();
-  });
+  let view = rollouts_view();
+
+  import { Navbar, NavLi, NavUl } from "flowbite-svelte";
+  $: activeUrl = $url.hash;
 </script>
 
 <SvelteToast />
 
-<nav>
-  <ButtonGroup class="*:!ring-primary-700">
-    <Button href="#active">Active</Button>
-    <Button href="#complete">Complete</Button>
-    <Button href="#failed">Failed</Button>
-    <Button href="#all">All</Button>
-  </ButtonGroup>
-</nav>
+<div style="margin-left: auto; margin-right: auto;">
+  <Navbar class="w-min">
+    <NavUl {activeUrl}>
+      <NavLi href="#active">Active</NavLi>
+      <NavLi href="#complete">Complete</NavLi>
+      <NavLi href="#failed">Failed</NavLi>
+      <NavLi href="#all">All</NavLi>
+    </NavUl>
+  </Navbar>
+</div>
 
-{#if $my_rollout_query.error && $my_rollout_query.error !== "loading"}
+{#if $view.error && $view.error !== "loading"}
   <!-- note use of me-3 in svg icon to ensure icon actually shows not too stuck to the text -->
   <div
     class="flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
@@ -57,12 +54,12 @@
     <span class="sr-only">Error</span>
     <div>
       <span class="font-medium">Cannot retrieve rollout data:</span>
-      {$my_rollout_query.error}
+      {$view.error}
     </div>
   </div>
 {/if}
 
-{#if $my_rollout_query.error === "loading"}
+{#if $view.error === "loading"}
   <div
     class="flex items-center justify-center w-56 h-56 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
     style="align-self: center"
@@ -87,7 +84,7 @@
   </div>
 {/if}
 
-{#if $my_rollout_query.engine_state === "missing"}
+{#if $view.engine_state === "missing"}
   <div
     class="flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
     role="alert"
@@ -112,7 +109,7 @@
   </div>
 {/if}
 
-{#if $my_rollout_query.engine_state === "inactive"}
+{#if $view.engine_state === "inactive"}
   <div
     class="flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
     role="alert"
@@ -137,7 +134,7 @@
   </div>
 {/if}
 
-{#if $my_rollout_query.engine_state === "broken"}
+{#if $view.engine_state === "broken"}
   <div
     class="flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
     role="alert"
@@ -162,7 +159,7 @@
   </div>
 {/if}
 
-{#if $my_rollout_query.engine_state === "paused"}
+{#if $view.engine_state === "paused"}
   <div
     class="flex items-center p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
     role="alert"
@@ -186,7 +183,7 @@
   </div>
 {/if}
 
-{#each $my_rollout_query.rollouts as rollout}
+{#each $view.rollouts as rollout}
   {#if (($url.hash === "" || $url.hash === "#active") && rollout.state !== "complete" && rollout.state !== "failed") || ($url.hash === "#complete" && rollout.state === "complete") || ($url.hash === "#failed" && rollout.state === "failed") || $url.hash === "#all"}
     <Rollout {rollout} />
   {/if}

diff --git a/rollout-dashboard/frontend/src/lib/stores.ts b/rollout-dashboard/frontend/src/lib/stores.ts
@@ -1,28 +1,17 @@
 import { get, writable, type Writable } from 'svelte/store'
-import { type Rollout } from './types'
+import { type Rollout, type RolloutsViewDelta } from './types'
 
-const BACKEND_TIMEOUT = 15000
-
-type SseMessage = {
-    error: [number, string] | null;
-    rollouts: Rollout[];
-    updated: Rollout[] | undefined;
-    deleted: String[] | undefined;
-    engine_state?: string;
-}
-
-export type RolloutResult = {
+export type RolloutsView = {
     error: [number, string] | string | null;
     rollouts: Rollout[];
     engine_state?: string;
 }
 
-
 const API_URL = import.meta.env.BACKEND_API_PATH || "/api/v1";
-const url = API_URL + "/rollouts/sse?incremental"
+const url = API_URL + "/sse/rollouts_view?incremental"
 var evtSource: null | EventSource = null;
 
-const rollout_store = writable<RolloutResult>({ rollouts: [], error: "loading" })
+const airflow_state = writable<RolloutsView>({ rollouts: [], error: "loading" })
 
 function resetupEventSource() {
     if (null !== evtSource) {
@@ -39,11 +28,11 @@ function resetupEventSource() {
     // var evtSourceGenerated = new Date();
     evtSource = new EventSource(url);
     evtSource.onmessage = async function (event) {
-        var sse_message: SseMessage = JSON.parse(event.data);
+        var sse_message: RolloutsViewDelta = JSON.parse(event.data);
         if (sse_message.error !== null) {
             let status = sse_message.error[0];
             if (status == 204) {
-                rollout_store.set({ rollouts: [], error: "loading" })
+                airflow_state.set({ rollouts: [], error: "loading" })
             } else {
                 let responseText = sse_message.error[1];
                 let errorText = status + " " + responseText;
@@ -52,21 +41,21 @@ function resetupEventSource() {
                     errorText = errorText + ": " + responseText
                 }
                 console.log('Request for rollout data failed: ' + errorText)
-                rollout_store.set({
-                    rollouts: get(rollout_store).rollouts,
-                    engine_state: get(rollout_store).engine_state,
+                airflow_state.set({
+                    rollouts: get(airflow_state).rollouts,
+                    engine_state: get(airflow_state).engine_state,
                     error: errorText
                 })
             }
         } else if (sse_message.rollouts !== undefined) {
             console.log("Full sync with " + sse_message.rollouts.length + " rollouts and engine state " + sse_message.engine_state);
-            rollout_store.set({
+            airflow_state.set({
                 rollouts: sse_message.rollouts,
                 error: null,
                 engine_state: sse_message.engine_state,
             })
         } else {
-            var rollouts: Rollout[] = get(rollout_store).rollouts;
+            var rollouts: Rollout[] = get(airflow_state).rollouts;
             var updated: Rollout[] | undefined = sse_message["updated"];
             var deleted: String[] | undefined = sse_message["deleted"];
             if (updated !== undefined) {
@@ -97,7 +86,7 @@ function resetupEventSource() {
                     }
                 }
             }
-            rollout_store.set({
+            airflow_state.set({
                 rollouts: rollouts,
                 error: null,
                 engine_state: sse_message.engine_state,
@@ -108,15 +97,15 @@ function resetupEventSource() {
         console.log({ message: "Disconnected from event source.  Reconnecting in 5 seconds.", event: e })
         if (evtSource !== null) { evtSource.close(); evtSource = null; }
         var errorText = 'Rollout dashboard is down — reconnecting in 5 seconds'
-        rollout_store.set({
-            rollouts: get(rollout_store).rollouts,
+        airflow_state.set({
+            rollouts: get(airflow_state).rollouts,
             error: errorText
         })
         setTimeout(resetupEventSource, 5000)
     }
 }
 
-export const rollout_query = ((): Writable<RolloutResult> => {
+export const rollouts_view = ((): Writable<RolloutsView> => {
     resetupEventSource()
-    return rollout_store
+    return airflow_state
 });
diff --git a/rollout-dashboard/frontend/src/lib/types.ts b/rollout-dashboard/frontend/src/lib/types.ts
@@ -77,3 +77,10 @@ export type Rollout = {
     last_scheduling_decision?: Date;
     batches: Batch[];
 };
+export type RolloutsViewDelta = {
+    error: [number, string] | null;
+    rollouts: Rollout[];
+    updated: Rollout[] | undefined;
+    deleted: String[] | undefined;
+    engine_state?: string;
+}