add CreateServiceForm, refactor Service

update deps

package.json

@@ -7,26 +7,26 @@
   },
   "type": "module",
   "devDependencies": {
-    "@types/node": "^20.2.5",
+    "@types/node": "^20.4.1",
     "autoprefixer": "^10.4.14",
-    "esbuild": "^0.17.19",
-    "postcss": "^8.4.24",
+    "esbuild": "^0.18.11",
+    "postcss": "^8.4.25",
     "tailwindcss": "^3.3.2",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2"
   },
   "dependencies": {
     "@deploy-cat/heroicons-solid": "^2.1.1",
     "@kubernetes/client-node": "^0.18.1",
     "@solid-auth/base": "^2.0.3",
-    "@solidjs/meta": "^0.28.2",
+    "@solidjs/meta": "^0.28.5",
     "@solidjs/router": "^0.8.2",
     "mongoose-zod": "^0.1.1",
-    "solid-js": "^1.7.2",
+    "solid-js": "^1.7.7",
     "solid-start": "^0.2.26",
     "solid-start-deno": "^0.2.26",
     "solid-start-node": "^0.2.26",
-    "undici": "^5.15.1",
+    "undici": "^5.22.1",
     "zod": "^3.21.4"
   },
   "engines": {

src/components/LoginForm.tsx

@@ -79,7 +79,12 @@ export const LoginForm = () => (
         </a>
       </div>
     </form>
-    <hr class="my-6" />
+    <div class="inline-flex items-center justify-center w-full">
+      <hr class="w-64 h-px my-8 bg-gray-200 border-0 dark:bg-gray-700" />
+      <span class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-800">
+        or
+      </span>
+    </div>
     <button
       class="btn btn-secondary w-full"
       onClick={() => signIn("github", { redirectTo: "/cloud" })}

src/components/cloud/CreateServiceForm.tsx

@@ -0,0 +1,134 @@
+import { createServerAction$, redirect } from "solid-start/server";
+import { k8sCustomObjects } from "~/k8s";
+
+export const CreateServiceForm = () => {
+  const [enrolling, { Form }] = createServerAction$(
+    async (form: FormData, { request }) => {
+      const service = {
+        name: form.get("name") as string,
+        image: form.get("image") as string,
+        port: Number(form.get("port")) as number,
+      };
+
+      const { body } = await k8sCustomObjects.createNamespacedCustomObject(
+        "serving.knative.dev",
+        "v1",
+        "adb-sh",
+        "services",
+        {
+          "apiVersion": "serving.knative.dev/v1",
+          "kind": "Service",
+          "metadata": {
+            "name": service.name,
+            "namespace": "adb-sh",
+          },
+          "spec": {
+            "template": {
+              "metadata": {
+                "annotations": {
+                  //"autoscaling.knative.dev/min-scale": "1",
+                },
+              },
+              "spec": {
+                "containerConcurrency": 0,
+                "containers": [
+                  {
+                    "image": service.image,
+                    "name": "user-container",
+                    "ports": [
+                      {
+                        "containerPort": service.port,
+                        "protocol": "TCP",
+                      },
+                    ],
+                    "readinessProbe": {
+                      "successThreshold": 1,
+                      "tcpSocket": {
+                        "port": 0,
+                      },
+                    },
+                    "resources": {},
+                  },
+                ],
+                "enableServiceLinks": false,
+                "timeoutSeconds": 300,
+              },
+            },
+          },
+        },
+      );
+    },
+  );
+
+  return (
+    <figure class="absolute top-8 left-1/2 -translate-x-1/2 w-128 m-3">
+      <div class="overflow-y-auto rounded-xl bg-gray-50 dark:bg-gray-800 drop-shadow-2xl p-6">
+        <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Create Service
+        </h2>
+        <Form>
+          <div class="mb-6">
+            <label
+              for="name"
+              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              name="name"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              required
+            />
+          </div>
+          <div class="mb-6">
+            <label
+              for="image"
+              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Image
+            </label>
+            <input
+              type="text"
+              name="image"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              required
+            />
+          </div>
+          <div class="mb-6">
+            <label
+              for="port"
+              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Container Port
+            </label>
+            <input
+              type="number"
+              name="port"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              required
+            />
+          </div>
+          <button type="submit" class="btn btn-primary">Deploy</button>
+        </Form>
+
+        <div class="inline-flex items-center justify-center w-full">
+          <hr class="w-64 h-px my-8 bg-gray-200 border-0 dark:bg-gray-700" />
+          <span class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-800">
+            or
+          </span>
+        </div>
+        <h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Add via cli
+        </h3>
+        <ol class="list-decimal ml-6">
+          <li>
+            <code class="bg-slate-600 px-1 rounded">
+              npx @deploycat/cli service create my-app
+            </code>
+          </li>
+        </ol>
+      </div>
+    </figure>
+  );
+};

src/components/cloud/service/Service.tsx

@@ -0,0 +1,62 @@
+import { For } from "solid-js";
+import { createServerAction$ } from "solid-start/server";
+import { Status } from "./Status";
+import { k8sCustomObjects } from "~/k8s";
+import { TrashIcon } from "@deploy-cat/heroicons-solid/24/solid/esm";
+
+export const Service = ({ service }) => {
+  const [deleting, { Form }] = createServerAction$(
+    async (form: FormData, { request }) => {
+      const service = {
+        name: form.get("name") as string,
+      };
+
+      const { body } = await k8sCustomObjects.deleteNamespacedCustomObject(
+        "serving.knative.dev",
+        "v1",
+        "adb-sh",
+        "services",
+        service.name,
+      );
+    },
+  );
+
+  return (
+    <figure class="card relative basis-64 grow p-6 m-3 hover:drop-shadow-md transition-all duration-100">
+      <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+        {service.metadata.name}
+      </h2>
+      <div class="absolute top-4 right-4">
+        <Form>
+          <input type="hidden" name="name" value={service.metadata.name} />
+          <button type="submit" disabled={deleting.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>
+        </Form>
+      </div>
+      <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>
+      </p>
+      <p class="font-normal text-gray-700 dark:text-gray-400 my-1">
+        <a
+          class="text-sky-400"
+          href={service.status.url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {service.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}
+          fallback={<span>n/a/</span>}
+        >
+          <Status conditions={service.status.conditions} />
+        </Show>
+      </p>
+    </figure>
+  );
+};

src/components/cloud/service/Status.tsx

@@ -0,0 +1,22 @@
+import { For, Show } from "solid-js";
+
+export const Status = ({ conditions }) => (
+  <div class="flex">
+    <For each={conditions}>
+      {(condition) => (
+        <figure class="flex items-center mr-4">
+          <symbol
+            class={`status inline-flex items-center justify-center w-2 h-2 mr-2 rounded`}
+            classList={{
+              ready: condition.status === "True",
+            }}
+          />
+          <span class="font-normal text-sm text-gray-700 dark:text-gray-400">
+            {condition.type}
+            <Show when={condition.reason}>{" "}({condition.reason})</Show>
+          </span>
+        </figure>
+      )}
+    </For>
+  </div>
+);

src/root.css

@@ -41,3 +41,10 @@ p {
 .card {
   @apply bg-white rounded-xl shadow-md sm:p-6 md:p-8 dark:bg-gray-800;
 }
+
+.status {
+  @apply bg-red-200 dark:bg-red-900;
+}
+.status.ready {
+  @apply bg-green-200 dark:bg-green-900;
+}

src/root.tsx

@@ -1,5 +1,5 @@
 // @refresh reload
-import { Suspense } from "solid-js";
+import { JSXElement, Show, Suspense } from "solid-js";
 import {
   A,
   Body,
@@ -16,6 +16,11 @@ import Header from "~/components/Header";
 import Footer from "~/components/Footer";
 import "./root.css";
 import { SessionProvider } from "@solid-auth/base/client";
+import { createStore } from "solid-js/store";
+
+export const [modalStore, setModalStore] = createStore({
+  modal: null as null | JSXElement,
+});
 
 export const Root = () => (
   <Html lang="en">
@@ -47,6 +52,7 @@ export const Root = () => (
           <ErrorBoundary>
             <Routes>
               <FileRoutes />
+              <Show when={modalStore.modal}>{modalStore.modal}</Show>
             </Routes>
             <Footer />
           </ErrorBoundary>