wip(frontend): implement self-service create button

backend/Cargo.toml

@@ -6,8 +6,8 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-axum = { version = "0.7.2", features = ["macros"] }
-tower-http = { version = "0.5.0", features = ["cors"] }
+axum = { version = "0.7", features = ["macros"] }
+tower-http = { version = "0.5", features = ["cors"] }
 tokio = { version = "1", features = ["full"] }
 sqlx = { version = "0.7", features = ["postgres", "uuid", "json", "chrono", "runtime-tokio", "tls-native-tls"] }
 tracing-subscriber = { version = "0.3.17", features = ["env-filter"] }

backend/src/main.rs

@@ -3,11 +3,11 @@ use std::fs::File;
 use std::sync::Arc;
 
 use axum::{Extension, Router};
-use axum::http::{StatusCode, Uri};
+use axum::http::{Method, StatusCode, Uri};
 use axum::routing::{get, post};
 use clap::Parser;
 use sqlx::postgres::PgPoolOptions;
-use tower_http::cors::{Any, CorsLayer};
+use tower_http::cors::{AllowHeaders, Any, CorsLayer};
 use tracing::{error, info};
 use tracing::log::warn;
 use tracing_subscriber::layer::SubscriberExt;
@@ -113,7 +113,12 @@ async fn main() {
         .layer(Extension(yaml_config))
         .layer(Extension(tx))
         .layer(Extension(pg_pool))
-        .layer(CorsLayer::new().allow_origin(Any));
+        .layer(
+            CorsLayer::new()
+                .allow_origin(Any)
+                .allow_methods(vec![Method::GET, Method::POST, Method::PUT, Method::DELETE, Method::OPTIONS])
+                .allow_headers(AllowHeaders::any())
+        );
     //.route("/catalog/:id", get(catalog::get_catalog_by_id))
     //.route("/catalog", post(catalog::create_catalog));
 

frontend/src/components/self-service/SelfServiceRunTable.tsx

@@ -1,14 +1,23 @@
 import {classNames, millisToHumanTime} from "@/lib/utils.ts";
 
-const statuses = {
-  QUEUED: 'text-orange-400 bg-orange-400/10',
-  RUNNING: 'text-cyan-400 bg-cyan-400/10',
-  SUCCESS: 'text-green-400 bg-green-400/10',
-  FAILURE: 'text-rose-400 bg-rose-400/10'
-}
+function getStatusStyle(status: string): string {
+  if (status === 'QUEUED') {
+    return 'text-orange-400 bg-orange-400/10'
+  }
 
-interface Props {
-  runs: any[]
+  if (status === 'RUNNING') {
+    return 'text-cyan-400 bg-cyan-400/10'
+  }
+
+  if (status === 'SUCCESS') {
+    return 'text-green-400 bg-green-400/10'
+  }
+
+  if (status === 'FAILURE') {
+    return 'text-rose-400 bg-rose-400/10'
+  }
+
+  return 'text-gray-400 bg-gray-400/10'
 }
 
 function getTotalExecutionTime(tasks: any[]): number {
@@ -39,6 +48,10 @@ function totalSuccessTasks(tasks: any[]): number {
   }, 0)
 }
 
+interface Props {
+  runs: any[]
+}
+
 export default function SelfServiceRunTable({runs}: Props): JSX.Element {
   return (
     <div className="px-4 sm:px-6 lg:px-8">
@@ -54,6 +67,9 @@ export default function SelfServiceRunTable({runs}: Props): JSX.Element {
                 >
                   Date
                 </th>
+                <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Service
+                </th>
                 <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                   Status
                 </th>
@@ -74,12 +90,15 @@ export default function SelfServiceRunTable({runs}: Props): JSX.Element {
                   <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 lg:pl-8">
                     {run.created_at}
                   </td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                    {run.service_slug}
+                  </td>
                   <td className="py-4 pl-0 pr-4 text-sm leading-6 sm:pr-8 lg:pr-20">
                     <div className="flex items-center justify-end gap-x-2 sm:justify-start">
                       <time className="text-gray-400 sm:hidden" dateTime={run.created_at}>
                         {run.created_at}
                       </time>
-                      <div className={classNames(statuses[run.status], 'flex-none rounded-full p-1')}>
+                      <div className={classNames(getStatusStyle(run.status), 'flex-none rounded-full p-1')}>
                         <div className="h-1.5 w-1.5 rounded-full bg-current"/>
                       </div>
                       <div className="hidden text-gray-500 text- sm:block">{run.status}</div>

frontend/src/components/self-service/SelfServiceSlideOver.tsx

@@ -4,7 +4,6 @@ import {XMarkIcon} from '@heroicons/react/24/outline'
 import TextField from "@/components/self-service/fields/TextField.tsx";
 import TextareaField from "@/components/self-service/fields/TextareaField.tsx";
 import SwitchField from "@/components/self-service/fields/SwitchField.tsx";
-import {useQuery} from "@tanstack/react-query";
 import {API_URL} from "@/config.ts";
 
 interface Props {
@@ -35,20 +34,23 @@ export default function SelfServiceSlideOver({catalogSlug, service, onClose}: Pr
 
     const fields = []
     for (const [id, value] of new FormData(event.target)) {
-      fields.push({
-        field_slug: id,
-        value: value
-      })
+      fields.push([id, value])
     }
 
-    console.log({payload: fields})
+    const payload = Object.fromEntries(fields)
 
-    useQuery({
-      queryKey: [`${service.slug}-submit`, fields],
-      queryFn: () =>
-        fetch(`${API_URL}/catalogs/${catalogSlug}/services/${service.slug}/execute`).then(
-          (res) => res.json(),
-        ),
+    console.log({payload: payload})
+
+    fetch(`${API_URL}/catalogs/${catalogSlug}/services/${service.slug}/execute`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({payload: payload}),
+    }).then(
+      (res) => res.json(),
+    ).then((data) => {
+      console.log(data)
     })
   }