From 0087fc570b373db62c1cfd3b0ce669965ad83a97 Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Mon, 17 Jun 2024 22:02:51 +0200
Subject: [PATCH] Convert kn api res to KnService Type

---
 src/components/EnvVarsInput.tsx          | 20 ++++----
 src/components/cloud/service/Service.tsx | 21 ++++----
 src/knative.ts                           | 32 +++++++++++--
 src/routes/cloud/apps/[app].tsx          | 61 ++++++------------------
 4 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/src/components/EnvVarsInput.tsx b/src/components/EnvVarsInput.tsx
index 9a7e0ed..7867738 100644
--- a/src/components/EnvVarsInput.tsx
+++ b/src/components/EnvVarsInput.tsx
@@ -1,4 +1,5 @@
 import { For, type Signal, createSignal } from "solid-js";
+import { TrashIcon } from "@deploy-cat/heroicons-solid/24/solid/esm";
 
 const [envCount, setEnvCount] = createSignal(0);
 const [env, setEnv] = createSignal(
@@ -20,11 +21,7 @@ const parseClipboard = (text: string) =>
 export const EnvVarsInput = () => {
   return (
     <>
-      <div
-        onPaste={(event) =>
-          setEnv(parseClipboard(event.clipboardData?.getData("text") ?? ""))
-        }
-      >
+      <div>
         <input
           type="hidden"
           name="env"
@@ -37,7 +34,14 @@ export const EnvVarsInput = () => {
         <For
           each={env()}
           fallback={
-            <div class="my-4">
+            <div
+              class="my-4"
+              onPaste={(event) =>
+                setEnv(
+                  parseClipboard(event.clipboardData?.getData("text") ?? "")
+                )
+              }
+            >
               <p>No Environment Variables yet!</p>
               <p>
                 Use <b>Ctrl+V</b> to paste an Env File or add manually.
@@ -64,11 +68,11 @@ export const EnvVarsInput = () => {
                 placeholder="Value"
               />
               <div
-                class="btn btn-warning join-item"
+                class="btn btn-error join-item"
                 tabindex={0}
                 onClick={() => setEnv(env().filter((_, i) => i !== index()))}
               >
-                Remove
+                <TrashIcon class="flex-shrink-0 w-5 h-5" />
               </div>
             </div>
           )}
diff --git a/src/components/cloud/service/Service.tsx b/src/components/cloud/service/Service.tsx
index 04c907d..a6c6029 100644
--- a/src/components/cloud/service/Service.tsx
+++ b/src/components/cloud/service/Service.tsx
@@ -4,6 +4,7 @@ import { knative } from "~/k8s";
 import { TrashIcon } from "@deploy-cat/heroicons-solid/24/solid/esm";
 import { getUser } from "~/lib/server";
 import { action, useSubmission, A } from "@solidjs/router";
+import type { Service as KnativeService } from "~/knative";
 
 const deleteServiceFromForm = async (form: FormData) => {
   "use server";
@@ -16,41 +17,41 @@ const deleteServiceFromForm = async (form: FormData) => {
 
 const deleteServiceAction = action(deleteServiceFromForm, "createService");
 
-export const Service = ({ service }) => {
+export const Service = ({ service }: { service: KnativeService }) => {
   const deleteServiceStatus = useSubmission(deleteServiceAction);
 
   return (
     <figure class="card relative basis-64 bg-base-200 shadow grow">
       <div class="card-body">
-        <A class="card-title" href={`/cloud/apps/${service.metadata.name}`}>{service.metadata.name}</A>
+        <A class="card-title" href={`/cloud/apps/${service.name}`}>
+          {service.name}
+        </A>
 
         <p class="font-normal text-gray-700 dark:text-gray-400 my-1">
-          <For each={service.spec.template.spec.containers}>
-            {(container) => <span>{container.image}</span>}
-          </For>
+          {service.image}
         </p>
         <p class="font-normal text-gray-700 dark:text-gray-400 my-1">
           <a
             class="text-sky-400"
-            href={service.status.url}
+            href={service.raw.status?.url}
             target="_blank"
             rel="noopener noreferrer"
           >
-            {service.status.url}
+            {service.raw.status?.url}
           </a>
         </p>
         <p class="font-bold text-sm text-gray-700 dark:text-gray-400 my-1">
           <Show
-            when={service.status.conditions?.length}
+            when={service.raw.status?.conditions?.length}
             fallback={<span>n/a/</span>}
           >
-            <Status conditions={service.status.conditions} />
+            <Status conditions={service.raw.status?.conditions} />
           </Show>
         </p>
       </div>
       <div class="absolute top-4 right-4">
         <form action={deleteServiceAction} method="post">
-          <input type="hidden" name="name" value={service.metadata.name} />
+          <input type="hidden" name="name" value={service.name} />
           <button type="submit" disabled={deleteServiceStatus.pending}>
             <TrashIcon class="flex-shrink-0 w-5 h-5 text-gray-500 hover:text-red-500 transition duration-75 dark:text-gray-400 dark:hover:text-red-800" />
           </button>
diff --git a/src/knative.ts b/src/knative.ts
index 7c2c5f8..5f9a8cd 100644
--- a/src/knative.ts
+++ b/src/knative.ts
@@ -9,8 +9,34 @@ export type Service = {
   minScale: number;
   maxRequests: number;
   envVars: { [key: string]: string };
+  raw?: any;
 };
 
+const toKnService = (service: any) =>
+  ({
+    name: service.metadata.name,
+    image: service.spec.template.spec.containers[0].image,
+    port: service.spec.template.spec.containers[0].ports[0].containerPort,
+    cpuLimit: service.spec.template.spec.containers[0].resources.limits?.cpu,
+    memoryLimit:
+      service.spec.template.spec.containers[0].resources.limits?.memory,
+    minScale:
+      service.spec.template.metadata.annotations[
+        "autoscaling.knative.dev/min-scale"
+      ],
+    maxRequests:
+      service.spec.template.metadata.annotations[
+        "autoscaling.knative.dev/target"
+      ],
+    envVars: Object.fromEntries(
+      service.spec.template.spec.containers[0].env?.map(({ name, value }) => [
+        name,
+        value,
+      ]) ?? []
+    ),
+    raw: service,
+  } as Service);
+
 export class Knative {
   kubeconfig: k8s.KubeConfig;
   customObjectsApi: k8s.CustomObjectsApi;
@@ -28,7 +54,8 @@ export class Knative {
       "services"
     );
     return {
-      services: body?.items,
+      services: body?.items.map(toKnService) as Array<Service>,
+      raw: body,
     };
   }
 
@@ -40,11 +67,10 @@ export class Knative {
       "services",
       name
     );
-    return body;
+    return toKnService(body);
   }
 
   async createService(service: Service, namespace: string) {
-    console.log(namespace);
     const { body } = await this.customObjectsApi.createNamespacedCustomObject(
       "serving.knative.dev",
       "v1",
diff --git a/src/routes/cloud/apps/[app].tsx b/src/routes/cloud/apps/[app].tsx
index 20ee1b3..6edb214 100644
--- a/src/routes/cloud/apps/[app].tsx
+++ b/src/routes/cloud/apps/[app].tsx
@@ -33,7 +33,7 @@ export default (props: RouteSectionProps) => {
     <div class="w-full">
       <Show when={service()} fallback={<span>no service with this name</span>}>
         <section>
-          <div>{service()?.metadata.name}</div>
+          <div>{service()?.name}</div>
 
           <div role="tablist" class="tabs tabs-lifted">
             <input
@@ -48,30 +48,27 @@ export default (props: RouteSectionProps) => {
               role="tabpanel"
               class="tab-content bg-base-100 border-base-300 rounded-box p-6"
             >
-              <p>name: {service().metadata.name}</p>
+              <p>name: {service()?.name}</p>
               <p class="font-normal text-gray-700 dark:text-gray-400 my-1">
-                images:{" "}
-                <For each={service().spec.template.spec.containers}>
-                  {(container) => <span>{container.image}</span>}
-                </For>
+                image {service()?.image}
               </p>
               <p class="font-normal text-gray-700 dark:text-gray-400 my-1">
                 url:{" "}
                 <a
                   class="text-sky-400"
-                  href={service().status.url}
+                  href={service()?.raw.status.url}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  {service().status.url}
+                  {service()?.raw.status.url}
                 </a>
               </p>
               <p class="font-bold text-sm text-gray-700 dark:text-gray-400 my-1">
                 <Show
-                  when={service().status.conditions?.length}
+                  when={service()?.raw.status.conditions?.length}
                   fallback={<span>n/a/</span>}
                 >
-                  <Status conditions={service().status.conditions} />
+                  <Status conditions={service()?.raw.status.conditions} />
                 </Show>
               </p>
             </div>
@@ -87,7 +84,7 @@ export default (props: RouteSectionProps) => {
               role="tabpanel"
               class="tab-content bg-base-100 border-base-300 rounded-box p-6"
             >
-              {JSON.stringify(service().spec.template.spec.containers[0].env)}
+              {JSON.stringify(service()?.envVars)}
             </div>
 
             <input
@@ -101,26 +98,8 @@ export default (props: RouteSectionProps) => {
               role="tabpanel"
               class="tab-content bg-base-100 border-base-300 rounded-box p-6"
             >
-              <p>
-                cpu limit:{" "}
-                <For each={service().spec.template.spec.containers}>
-                  {(container) => (
-                    <span>
-                      {container.name}: {container?.resources?.limits?.cpu}
-                    </span>
-                  )}
-                </For>
-              </p>
-              <p>
-                cpu limit:{" "}
-                <For each={service().spec.template.spec.containers}>
-                  {(container) => (
-                    <span>
-                      {container.name}: {container?.resources?.limits?.memory}
-                    </span>
-                  )}
-                </For>
-              </p>
+              <p>cpu limit: {service()?.cpuLimit}</p>
+              <p>memory limit: {service()?.memoryLimit}</p>
             </div>
 
             <input
@@ -135,26 +114,14 @@ export default (props: RouteSectionProps) => {
               class="tab-content bg-base-100 border-base-300 rounded-box p-6"
             >
               <p>
-                target load per pod:{" "}
-                {
-                  service().spec.template.metadata?.annotations?.[
-                    "autoscaling.knative.dev/target"
-                  ]
-                }{" "}
-                {
+                target load per pod: {service()?.maxRequests}
+                {/* {
                   service().spec.template.metadata?.annotations?.[
                     "autoscaling.knative.dev/metric"
                   ]
-                }
-              </p>
-              <p>
-                minimum container count:{" "}
-                {
-                  service().spec.template.metadata?.annotations?.[
-                    "autoscaling.knative.dev/min-scale"
-                  ]
-                }
+                } */}
               </p>
+              <p>minimum container count: {service()?.minScale}</p>
             </div>
             <input
               type="radio"