Skip to content

Commit

Permalink
Convert kn api res to KnService Type
Browse files Browse the repository at this point in the history
  • Loading branch information
@adb-sh
adb-sh committed Jun 17, 2024
1 parent 02a56e4 commit 0087fc5
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 68 deletions.
20 changes: 12 additions & 8 deletions src/components/EnvVarsInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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"
Expand All @@ -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.
Expand All @@ -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>
)}
Expand Down
21 changes: 11 additions & 10 deletions src/components/cloud/service/Service.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>
Expand Down
32 changes: 29 additions & 3 deletions src/knative.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,7 +54,8 @@ export class Knative {
"services"
);
return {
services: body?.items,
services: body?.items.map(toKnService) as Array<Service>,
raw: body,
};
}

Expand All @@ -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",
Expand Down
61 changes: 14 additions & 47 deletions src/routes/cloud/apps/[app].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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"
Expand Down

0 comments on commit 0087fc5

Please sign in to comment.