feat: add creating blueprint out of a project

Signed-off-by: Jan Lauber <jan.lauber@protonmail.ch>
janlauber · Jan 8, 2024 · e403557 · e403557
1 parent 727fcbf
commit e403557
Show file tree

Hide file tree

Showing 31 changed files with 1,071 additions and 541 deletions.
diff --git a/ui/frontend/src/lib/components/projects/MetricsChart.svelte b/ui/frontend/src/lib/components/projects/MetricsChart.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-  import { Chart, Card, Skeleton, WidgetPlaceholder, Spinner } from "flowbite-svelte";
-    import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import selectedProjectId from "$lib/stores/project";
+  import { Chart, Card, Skeleton, WidgetPlaceholder, Spinner, Button } from "flowbite-svelte";
+  import { Cpu, Expand, MemoryStick } from "lucide-svelte";
+  import { onMount } from "svelte";
 
   export let title = "CPU";
   export let limits = 0;
@@ -11,7 +14,7 @@
 
   let loading = true;
 
-  $: series = [usage, requests, limits];
+  $: series = [usage, requests];
 
   $: options = {
     chart: {
@@ -59,7 +62,7 @@
       }
     ],
     xaxis: {
-      categories: ["Usage", "Requests", "Limits"],
+      categories: ["Usage", "Reserved"],
       labels: {
         show: true
       },
@@ -77,9 +80,12 @@
 
   // random loading between 0.2 and 0.8s
   onMount(() => {
-    setTimeout(() => {
-      loading = false;
-    }, Math.random() * 600 + 200);
+    setTimeout(
+      () => {
+        loading = false;
+      },
+      Math.random() * 600 + 200
+    );
   });
 </script>
 
@@ -88,6 +94,11 @@
     <div class="flex-col items-center">
       <div class="flex items-center mb-1">
         <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white mr-1">
+          {#if title === "Total CPU (Cores)"}
+            <Cpu class="inline -mt-1" />
+          {:else if title === "Total Memory (GB)"}
+            <MemoryStick class="inline -mt-1" />
+          {/if}
           {title}
         </h5>
       </div>
@@ -96,10 +107,21 @@
   {#if !loading}
     <Chart {options} />
   {:else}
-    <div class="flex justify-center items-center w-full"
-      style="height: 225px;"
-    >
+    <div class="flex justify-center items-center w-full" style="height: 225px;">
       <Spinner color="primary" />
     </div>
   {/if}
+
+  <Button
+    color="primary"
+    class="mt-2"
+    size="sm"
+    outline
+    on:click={() => {
+      goto(`/app/projects/${$selectedProjectId}/scale`);
+    }}
+  >
+    <Expand class="w-4 h-4 inline-block mr-1 " />
+    Scale
+  </Button>
 </Card>
diff --git a/ui/frontend/src/lib/components/projects/RolloutChart.svelte b/ui/frontend/src/lib/components/projects/RolloutChart.svelte
@@ -2,6 +2,7 @@
   import { rollouts } from "$lib/stores/data";
   import { Chart, Card } from "flowbite-svelte";
   import { ChevronDownSolid, ChevronUpSolid } from "flowbite-svelte-icons";
+    import { History, Rocket } from "lucide-svelte";
 
   let filterByOptions = ["Last 7 days", "Last 30 days", "Last 90 days"];
   let selectedFilterBy = filterByOptions[0];
@@ -155,7 +156,7 @@
     data = data.reverse();
   }
 
-  let options = {
+  let options: any = {
     chart: {
       height: "400px",
       maxWidth: "100%",
@@ -230,6 +231,7 @@
   <div class="flex justify-between">
     <div>
       <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
+        <History class="w-6 h-6 inline-block mr-1 -mt-1" />
         {filteredRollouts.length}
       </h5>
       <p class="text-base font-normal text-gray-500 dark:text-gray-400">

diff --git a/ui/frontend/src/lib/components/projects/SideNav.svelte b/ui/frontend/src/lib/components/projects/SideNav.svelte
@@ -1,28 +1,19 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import { projects } from "$lib/stores/data";
   import selectedProjectId from "$lib/stores/project";
-  import type { ProjectSettings } from "$lib/utils/interfaces";
   import {
     ArrowLeft,
     Boxes,
     Cog,
     Database,
     Expand,
-    FileText,
     HardDrive,
     History,
     LineChart,
     Network,
     Variable
   } from "lucide-svelte";
 
-  // Get current project settings
-  // @ts-ignore
-  const projectSettings: ProjectSettings = $projects.find(
-    (project) => project.id === $selectedProjectId
-  )?.expand?.blueprint.settings;
-
   // Return navigation items based on project settings
   const generateItems = (projectId: string) => {
     const items = [
@@ -32,12 +23,6 @@
         current: false,
         icon: LineChart
       },
-      {
-        name: "Logs",
-        href: `/app/projects/${projectId}/logs`,
-        current: false,
-        icon: FileText
-      },
       {
         name: "Rollouts",
         href: `/app/projects/${projectId}/rollouts`,
@@ -88,74 +73,6 @@
       }
     ];
 
-    // Remove items based on project settings
-    if (!projectSettings?.overview) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Overview")
-      );
-    }
-    if (!projectSettings?.logs) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Logs")
-      );
-    }
-    if (!projectSettings?.rollouts) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Rollouts")
-      );
-    }
-    if (!projectSettings?.image) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Image")
-      );
-    }
-    if (!projectSettings?.scale) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Scale")
-      );
-    }
-    if (!projectSettings?.network) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Network")
-      );
-    }
-    if (!projectSettings?.volumes) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Volumes")
-      );
-    }
-    if (!projectSettings?.instances) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Instances")
-      );
-    }
-    if (!projectSettings?.envs) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Envs & Secrets")
-      );
-    }
-    if (!projectSettings?.settings) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Settings")
-      );
-    }
-    if (!projectSettings?.logs && !projectSettings?.rollouts) {
-      removeItem(
-        items,
-        items.find((item) => item.name === "Logs")
-      );
-    }
-
     return items;
   };
 

diff --git a/ui/frontend/src/lib/components/rollouts/RolloutsTable.svelte b/ui/frontend/src/lib/components/rollouts/RolloutsTable.svelte
@@ -178,6 +178,8 @@
     }, "");
   }
 
+  let filteredRollouts: RolloutsResponse<Rexpand>[] = [];
+
   $: filteredRollouts = $rollouts.filter((rollout) => {
     const searchTermLower = searchTerm.toLowerCase();
     const manifestString = rollout.manifest ? flattenObject(rollout.manifest).toLowerCase() : "";

diff --git a/ui/frontend/src/lib/components/scale/CPUSettings.svelte b/ui/frontend/src/lib/components/scale/CPUSettings.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { Label, Radio } from "flowbite-svelte";
+    import { Cpu } from "lucide-svelte";
+  export let cpuRequestsFloat = 0.1;
+</script>
+
+<Label for="tag" class="block mb-1">
+  <Cpu class="inline-block mr-1" size="1rem" />
+  CPU
+</Label>
+<form>
+  <ul
+    class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600"
+  >
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={cpuRequestsFloat} value={0.1}>
+        <div class="block">
+          <p class="">Nano</p>
+          <p class="text-xs font-light">(0.1 vCPU)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={cpuRequestsFloat} value={0.25}>
+        <div class="block">
+          <p class="">Micro</p>
+          <p class="text-xs font-light">(0.25 vCPU)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={cpuRequestsFloat} value={0.5}>
+        <div class="block">
+          <p class="">Small</p>
+          <p class="text-xs font-light">(0.5 vCPU)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={cpuRequestsFloat} value={1}>
+        <div class="block">
+          <p class="">Medium</p>
+          <p class="text-xs font-light">(1 vCPU)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={cpuRequestsFloat} value={2}>
+        <div class="block">
+          <p class="">Large</p>
+          <p class="text-xs font-light">(2 vCPU)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={cpuRequestsFloat} value={4}>
+        <div class="block">
+          <p class="">X-Large</p>
+          <p class="text-xs font-light">(4 vCPU)</p>
+        </div>
+      </Radio>
+    </li>
+  </ul>
+</form>
diff --git a/ui/frontend/src/lib/components/scale/MemorySettings.svelte b/ui/frontend/src/lib/components/scale/MemorySettings.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Label, Radio } from "flowbite-svelte";
+    import { MemoryStick } from "lucide-svelte";
+
+  export let memoryRequestsInt = 128;
+</script>
+
+<Label for="tag" class="block mb-1">
+  <MemoryStick class="inline-block mr-1" size="1rem" />
+  Memory
+</Label>
+<form>
+  <ul
+    class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600"
+  >
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={memoryRequestsInt} value={128}>
+        <div class="block">
+          <p class="">Nano</p>
+          <p class="text-xs font-light">(128 MB)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={memoryRequestsInt} value={256}>
+        <div class="block">
+          <p class="">Micro</p>
+          <p class="text-xs font-light">(256 MB)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={memoryRequestsInt} value={512}>
+        <div class="block">
+          <p class="">Small</p>
+          <p class="text-xs font-light">(512 MB)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={memoryRequestsInt} value={1024}>
+        <div class="block">
+          <p class="">Medium</p>
+          <p class="text-xs font-light">(1 GB)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={memoryRequestsInt} value={2048}>
+        <div class="block">
+          <p class="">Large</p>
+          <p class="text-xs font-light">(2 GB)</p>
+        </div>
+      </Radio>
+    </li>
+    <li class="w-full">
+      <Radio name="hor-list" class="p-3" bind:group={memoryRequestsInt} value={4096}>
+        <div class="block">
+          <p class="">X-Large</p>
+          <p class="text-xs font-light">(4 GB)</p>
+        </div>
+      </Radio>
+    </li>
+  </ul>
+</form>