feat(frontend): broken interfaces implementation

Signed-off-by: Jan Lauber <jan.lauber@protonmail.ch>
janlauber · Dec 10, 2023 · 449ffb9 · 449ffb9
1 parent 4b28722
commit 449ffb9
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 162 deletions.
diff --git a/ui/frontend/src/lib/components/networking/NewInterface.svelte b/ui/frontend/src/lib/components/networking/NewInterface.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { client } from "$lib/pocketbase";
   import type { RolloutsRecord, RolloutsResponse } from "$lib/pocketbase/generated-types";
-  import { updateDataStores, type Rexpand, UpdateFilterEnum } from "$lib/stores/data";
+  import { updateDataStores, type Rexpand, UpdateFilterEnum, currentRollout } from "$lib/stores/data";
   import { Accordion, AccordionItem, Button, Input, Label, Toggle } from "flowbite-svelte";
   import selectedProjectId from "$lib/stores/project";
   import toast from "svelte-french-toast";
 
   export let modal: boolean;
-  export let current_rollout: RolloutsResponse<Rexpand> | undefined;
 
   interface Interface {
     id: string;
@@ -28,7 +27,7 @@
   };
 
   async function handleCreateInterface() {
-    if (!current_rollout) {
+    if (!$currentRollout) {
       toast.error("No rollout selected");
       return;
     }
@@ -45,7 +44,7 @@
 
     // Check for existing interface with same name, host, or port
     // @ts-ignore
-    const existingInterface = current_rollout.manifest.spec.interfaces.find(
+    const existingInterface = $currentRollout.manifest.spec.interfaces.find(
       (i: any) =>
         i.name === inf.name ||
         i.port === inf.port ||
@@ -61,13 +60,13 @@
 
     if (inf.host) {
       new_manifest = {
-        ...current_rollout.manifest,
+        ...$currentRollout.manifest,
         spec: {
           // @ts-ignore
-          ...current_rollout.manifest.spec,
+          ...$currentRollout.manifest.spec,
           interfaces: [
             // @ts-ignore
-            ...current_rollout.manifest.spec.interfaces,
+            ...$currentRollout.manifest.spec.interfaces,
             {
               name: inf.name,
               port: parseInt(inf.port.toString()),
@@ -90,13 +89,13 @@
       };
     } else {
       new_manifest = {
-        ...current_rollout.manifest,
+        ...$currentRollout.manifest,
         spec: {
           // @ts-ignore
-          ...current_rollout.manifest.spec,
+          ...$currentRollout.manifest.spec,
           interfaces: [
             // @ts-ignore
-            ...current_rollout.manifest.spec.interfaces,
+            ...$currentRollout.manifest.spec.interfaces,
             {
               name: inf.name,
               port: parseInt(inf.port.toString())
@@ -106,16 +105,16 @@
       };
     }
 
+    console.log(new_manifest);
+
     const data: RolloutsRecord = {
       manifest: new_manifest,
-      startDate: current_rollout.startDate,
+      startDate: $currentRollout.startDate,
       endDate: "",
       project: $selectedProjectId,
       user: client.authStore.model?.id
     };
 
-    console.log(data);
-
     toast.promise(
       client
         .collection("rollouts")

diff --git a/ui/frontend/src/lib/components/rollouts/RolloutsTable.svelte b/ui/frontend/src/lib/components/rollouts/RolloutsTable.svelte
@@ -244,7 +244,7 @@
             <span class="text-sm font-light">Replicas</span>
             <span class="text-sm font-semibold">
               {#if selectedRolloutStatus}
-                {selectedRolloutStatus?.deployment.replicas}
+                {selectedRolloutStatus?.deployment?.replicas}
               {/if}
             </span>
           </div>

diff --git a/ui/frontend/src/lib/stores/data.ts b/ui/frontend/src/lib/stores/data.ts
@@ -16,6 +16,9 @@ export type Rexpand = {
 export const rollouts: Writable<RolloutsResponse<Rexpand>[]> = writable<
     RolloutsResponse<Rexpand>[]
 >([]);
+export const currentRollout: Writable<RolloutsResponse<Rexpand> | undefined> = writable<
+    RolloutsResponse<Rexpand> | undefined
+>(undefined);
 export type Pexpand = {
     framework: FrameworksResponse;
 };
@@ -71,6 +74,10 @@ export async function updateRollouts(projectId?: string) {
             selectedProjectId.set(projectId);
             // @ts-ignore
             rollouts.set(response.filter((rollout) => rollout.project === projectId));
+
+            // set the current rollout to the one without an endDate
+            // @ts-ignore
+            currentRollout.set(response.find((rollout) => rollout.endDate === ""));
             return;
         }
         rollouts.set(response);