+
+
-
-
-
-
- {/* Static sidebar for desktop */}
-
- {/* Sidebar component, swap this element with another sidebar if you like */}
-
- }
-
- {
- activeTab.name === 'Runs' &&
- }
-
-
-}
+export default SelfServiceWithTitle;
diff --git a/frontend/src/components/self-service/SelfServiceCard.tsx b/frontend/src/components/self-service/SelfServiceCard.tsx
index 4229714..40d7610 100644
--- a/frontend/src/components/self-service/SelfServiceCard.tsx
+++ b/frontend/src/components/self-service/SelfServiceCard.tsx
@@ -1,84 +1,111 @@
-import {classNames} from "@/lib/utils.ts";
-import {TargetIcon} from "lucide-react";
-import {TrashIcon} from "@heroicons/react/24/outline";
+import { ThemeColors } from "@/enums/theme-colors.enum";
+import { Service } from "@/types/catalog.type";
+import { Menu, Transition } from "@headlessui/react";
+import {
+ EllipsisHorizontalIcon,
+ PlusIcon,
+ TrashIcon,
+} from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { Fragment, useCallback } from "react";
+import { Button } from "../common/Button";
-function getIcon(icon?: string): JSX.Element {
- switch (icon?.toLowerCase()) {
- case 'target':
- return
- case 'trash':
- return
- default:
- return
- }
+export interface SelfServiceCardProps {
+ service: Service;
+ onCreateClicked: (slug: string) => void;
+ onEditClicked: (slug: string) => void;
+ onViewRunsClicked: (slug: string) => void;
}
-interface Props {
- title: string;
- description: string;
- icon: string | undefined;
- iconColor: string | undefined;
- index: number;
- totalCards: number;
- onClick: () => void;
-}
-
-export default function SelfServiceCard({title, description, icon, iconColor, index, totalCards, onClick}: Props) {
- let iconBackground = 'bg-indigo-50'
- if (iconColor) {
- iconBackground = `bg-${iconColor}-50`
- }
-
- let iconForeground = 'text-indigo-700'
- if (iconColor) {
- iconForeground = `text-${iconColor}-700`
- }
-
- const iconElement = getIcon(icon)
+export default function SelfServiceCard({
+ service,
+ onCreateClicked,
+ onEditClicked,
+ onViewRunsClicked,
+}: SelfServiceCardProps) {
+ const getIcon = useCallback((icon: string) => {
+ switch (icon?.toLowerCase()) {
+ case "target":
+ return ;
+ case "trash":
+ return ;
+ default:
+ return ;
+ }
+ }, []);
return (
-
-
- {!item.children ? (
- onItemClicked(item, undefined)}
- >
-
- {item.name}
-
- ) : (
-
- {({open}) => (
- <>
-
-
- {item.name}
-
-
-
- {item.children?.map((subItem) => (
-
- {/* 44px */}
- onItemClicked(item, subItem)}
- >
- {subItem.name}
-
-
- ))}
-
-
- )}
-
- )}
-
+ );
}
diff --git a/frontend/src/components/common/Button.tsx b/frontend/src/components/common/Button.tsx
new file mode 100644
index 0000000..a53ec70
--- /dev/null
+++ b/frontend/src/components/common/Button.tsx
@@ -0,0 +1,50 @@
+import { ThemeColors } from "@/enums/theme-colors.enum";
+import clsx from "clsx";
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
+
+export interface ButtonProps
+ extends DetailedHTMLProps<
+ ButtonHTMLAttributes,
+ HTMLButtonElement
+ > {
+ color?: ThemeColors;
+ loading?: boolean;
+ flat?: boolean;
+ disabled?: boolean;
+ children?: ReactNode;
+}
+
+export function Button({
+ color = ThemeColors.PRIMARY,
+ loading,
+ flat,
+ disabled,
+ children,
+ ...props
+}: ButtonProps) {
+ const config: {
+ [key in ThemeColors]: string;
+ } = {
+ [ThemeColors.PRIMARY]: flat
+ ? "bg-transparent text-indigo-500"
+ : "bg-indigo-500 hover:bg-indigo-700 text-white",
+ [ThemeColors.SECONDARY]: flat
+ ? "bg-transparent text-violet-500"
+ : "bg-violet-500 hover:bg-violet-700 text-white",
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/common/Dialog.tsx b/frontend/src/components/common/Dialog.tsx
new file mode 100644
index 0000000..89b9bd9
--- /dev/null
+++ b/frontend/src/components/common/Dialog.tsx
@@ -0,0 +1,115 @@
+import { dialogOpenedAtomFamily } from "@/atoms/dialog.atoms";
+import { DialogIds } from "@/enums/dialog-ids.enum";
+import { ThemeColors } from "@/enums/theme-colors.enum";
+import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { useAtom } from "jotai";
+import { Fragment, ReactNode } from "react";
+import { Button } from "./Button";
+
+export interface DialogProps {
+ id: DialogIds;
+ title: string;
+ initialFocus?: React.MutableRefObject;
+ children: ReactNode;
+ customFooter?: boolean;
+}
+
+export interface DialogFooterProps {
+ onClose?: () => void;
+ onValidate?: () => void;
+}
+
+export function DialogFooter({ onClose, onValidate }: DialogFooterProps) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/common/DynamicField.tsx b/frontend/src/components/common/DynamicField.tsx
new file mode 100644
index 0000000..2134891
--- /dev/null
+++ b/frontend/src/components/common/DynamicField.tsx
@@ -0,0 +1,47 @@
+import { Field } from "@/types/catalog.type";
+import SwitchField from "./SwitchField";
+import TextField from "./TextField";
+import TextareaField from "./TextareaField";
+
+export interface DynamicFieldProps {
+ field: Field;
+ initialFocus?: {
+ name: string;
+ ref: React.MutableRefObject;
+ };
+}
+
+export function DynamicField({ field, initialFocus }: DynamicFieldProps) {
+ const ref = initialFocus?.name === field.slug ? initialFocus.ref : undefined;
+
+ if (field.type === "text") {
+ return (
+ }
+ />
+ );
+ } else if (field.type === "number") {
+ return (
+ }
+ />
+ );
+ } else if (field.type === "textarea") {
+ return (
+ }
+ />
+ );
+ } else if (field.type === "boolean") {
+ return ;
+ };
+}
+
+export function DynamicFields({ fields, initialFocus }: DynamicFieldsProps) {
+ return fields.map((field) => (
+ {
+ formRef: UseFormReturn;
+ onSubmit?: SubmitHandler;
+ className?: string;
+ children: JSX.Element | JSX.Element[];
+}
+
+export function Form({
+ onSubmit,
+ children,
+ className,
+ formRef,
+}: FormProps) {
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/components/common/FormButtons.tsx b/frontend/src/components/common/FormButtons.tsx
new file mode 100644
index 0000000..8dae75f
--- /dev/null
+++ b/frontend/src/components/common/FormButtons.tsx
@@ -0,0 +1,27 @@
+import { ThemeColors } from "@/enums/theme-colors.enum";
+import { Button } from "./Button";
+
+export interface FormButtonsProps {
+ valid: boolean;
+ onCancel?: () => void;
+}
+
+export function FormButtons({ valid, onCancel }: FormButtonsProps) {
+ return (
+
+ {({ open }) => (
+ <>
+
+ );
+}
diff --git a/frontend/src/components/common/Nav.tsx b/frontend/src/components/common/Nav.tsx
new file mode 100644
index 0000000..8ab13c0
--- /dev/null
+++ b/frontend/src/components/common/Nav.tsx
@@ -0,0 +1,86 @@
+import { userAtom } from "@/atoms/user.atoms";
+import { Disclosure } from "@headlessui/react";
+import clsx from "clsx";
+import { useAtomValue } from "jotai";
+import { BellIcon } from "lucide-react";
+import NavigationItem, { RouteItem } from "./NavigationItem";
+
+export interface NavProps {
+ routes: RouteItem[];
+}
+
+export interface MobileNavProps extends NavProps {
+ userMenu: RouteItem[];
+}
+
+export function MobileNav({ routes, userMenu }: MobileNavProps) {
+ const user = useAtomValue(userAtom);
+
+ return (
+
+
+ );
+}
+
+export function Nav({ routes }: NavProps) {
+ return routes.map((item) =>
+
+ );
+}
+
+export default Subheader;
diff --git a/frontend/src/components/common/SwitchField.tsx b/frontend/src/components/common/SwitchField.tsx
new file mode 100644
index 0000000..00d64a7
--- /dev/null
+++ b/frontend/src/components/common/SwitchField.tsx
@@ -0,0 +1,75 @@
+import { Field } from "@/types/catalog.type";
+import { Switch } from "@headlessui/react";
+import clsx from "clsx";
+import { Controller, useFormContext } from "react-hook-form";
+
+interface SwitchFieldProps {
+ field: Field;
+}
+
+export default function SwitchField({ field }: SwitchFieldProps) {
+ const { control } = useFormContext();
+
+ let defaultValue = false;
+
+ if (field.default.toLowerCase() === "true") {
+ defaultValue = true;
+ }
+
+ return (
+ {
+ field: Field;
+}
+
+const TextField = forwardRef(
+ (
+ { field, ...props }: TextFieldProps,
+ ref: ForwardedRef,
+ ) => {
+ const { register, unregister } = useFormContext();
+
+ useEffect(
+ () => () => {
+ unregister(field.slug);
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [],
+ );
+
+ return (
+ {
+ field: Field;
+}
+
+const TextareaField = forwardRef(
+ (
+ { field, ...props }: TextareaFieldProps,
+ ref: ForwardedRef,
+ ) => {
+ const { register, unregister } = useFormContext();
+
+ useEffect(
+ () => () => {
+ unregister(field.slug);
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [],
+ );
+
+ return (
+
+ Loading...
}>
+
- {/*
-
+ Torii โฉ๏ธ
-
+
-
- )
-}
-
-function getNavigationJsx(
- item: NavigationItem,
- onItemClicked: (item: NavigationItem, subItem?: NavigationChildrenItem) => void,
-): JSX.Element {
- return
+
+
-
-
+
+
-
-
-
- {currentTabTitle}
- {/**/}
- {/* Your profile*/}
- {/* {content}
-
+
+
+
+ );
+}
+
+export default function Dialog({
+ id,
+ title,
+ initialFocus,
+ customFooter,
+ children,
+}: DialogProps) {
+ const [isOpen, setIsOpen] = useAtom(dialogOpenedAtomFamily(id));
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ setIsOpen(false)}
+ onValidate={() => setIsOpen(false)}
+ />
+ )}
+
+
+
+
+
+
+
+
+ {!customFooter && (
+
+
+ {title}
+
+
+ {children}
+ '{field.type}' is not a supported field
; +} diff --git a/frontend/src/components/common/DynamicFields.tsx b/frontend/src/components/common/DynamicFields.tsx new file mode 100644 index 0000000..19aa07d --- /dev/null +++ b/frontend/src/components/common/DynamicFields.tsx @@ -0,0 +1,18 @@ +import { Field } from "@/types/catalog.type"; +import { DynamicField } from "./DynamicField"; + +export interface DynamicFieldsProps { + fields: Field[]; + initialFocus?: { + name: string; + ref: React.MutableRefObject
+
+ {onCancel && (
+
+ )}
+
+ );
+}
diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx
new file mode 100644
index 0000000..d0df3fe
--- /dev/null
+++ b/frontend/src/components/common/Header.tsx
@@ -0,0 +1,116 @@
+import { userAtom } from "@/atoms/user.atoms";
+import { Disclosure, Menu, Transition } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { useAtomValue } from "jotai";
+import { BellIcon } from "lucide-react";
+import { Fragment } from "react";
+import { MobileNav, Nav } from "./Nav";
+import { RouteItem } from "./NavigationItem";
+
+export interface HeaderProps {
+ routes: RouteItem[];
+ userMenu: RouteItem[];
+}
+
+export function Header({ routes, userMenu }: HeaderProps) {
+ const user = useAtomValue(userAtom);
+
+ return (
+
+
+
+
+
+
+
+ {/* 
+ */}
+
+
+ */}
+ + Torii โฉ๏ธ +
+
+
+
+
+
+
+ {/* Profile dropdown */}
+
+
+
+ {/* Mobile menu button */}
+
+
+ Open main menu
+ {open ? (
+
+ ) : (
+
+ )}
+
+
+
+ {routes.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+
+
+
+
+ 
+
+
+
+
+
+ {user.name}
+
+
+ {user.email}
+
+
+ {userMenu.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+
+ );
+}
diff --git a/frontend/src/components/common/Subheader.tsx b/frontend/src/components/common/Subheader.tsx
new file mode 100644
index 0000000..0645827
--- /dev/null
+++ b/frontend/src/components/common/Subheader.tsx
@@ -0,0 +1,18 @@
+import { pageTitleAtom } from "@/atoms/navigation.atoms";
+import { useAtomValue } from "jotai";
+
+export function Subheader() {
+ const pageTitle = useAtomValue(pageTitleAtom);
+
+ return (
+ Oops!
+Sorry, an unexpected error has occurred.
+{error.name}
++ {error.message} +
+
+
+ + {pageTitle} +
+
+
+ );
+}
diff --git a/frontend/src/components/common/TextField.tsx b/frontend/src/components/common/TextField.tsx
new file mode 100644
index 0000000..1849b60
--- /dev/null
+++ b/frontend/src/components/common/TextField.tsx
@@ -0,0 +1,63 @@
+import { Field } from "@/types/catalog.type";
+import {
+ InputHTMLAttributes,
+ useEffect,
+ forwardRef,
+ ForwardedRef,
+} from "react";
+import { useFormContext } from "react-hook-form";
+
+export interface TextFieldProps extends InputHTMLAttributes
+
+
+ {field.required && "Required"}
+
+
+
+ (
+
+
+
+ {field.description}
+
+
+ {
+ if (onChange) {
+ onChange(v);
+ }
+ }}
+ className={clsx(
+ value ? "bg-indigo-600" : "bg-gray-200",
+ "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
+ )}
+ >
+
+
+
+ )}
+ />
+
+
+
+ );
+ },
+);
+
+export default TextField;
diff --git a/frontend/src/components/common/TextareaField.tsx b/frontend/src/components/common/TextareaField.tsx
new file mode 100644
index 0000000..59ed64e
--- /dev/null
+++ b/frontend/src/components/common/TextareaField.tsx
@@ -0,0 +1,63 @@
+import { Field } from "@/types/catalog.type";
+import {
+ TextareaHTMLAttributes,
+ useEffect,
+ forwardRef,
+ ForwardedRef,
+} from "react";
+import { useFormContext } from "react-hook-form";
+
+interface TextareaFieldProps
+ extends TextareaHTMLAttributes
+
+
+ {field.required && "Required"}
+
+
+
+
+
+
+
+ );
+ },
+);
+
+export default TextareaField;
diff --git a/frontend/src/components/self-service/SelfService.tsx b/frontend/src/components/self-service/SelfService.tsx
index d641345..2c0998d 100644
--- a/frontend/src/components/self-service/SelfService.tsx
+++ b/frontend/src/components/self-service/SelfService.tsx
@@ -1,59 +1,18 @@
-import {useState} from "react";
-import {classNames} from "@/lib/utils.ts";
-import SelfServiceTabService from "@/components/self-service/SelfServiceTabService.tsx";
-import SelfServiceTabRun from "@/components/self-service/SelfServiceTabRun.tsx";
-
-const tabs = [
- {name: 'Services', href: '#', current: true},
- {name: 'Runs', href: '#', current: false},
-]
-
-interface Props {
- catalogSlug: string
- services: any[]
+import { withPageTitle } from "@/hoc/with-page-title";
+import { Provider } from "jotai";
+import { Suspense } from "react";
+import SelfServiceCatalog from "./SelfServiceCatalog";
+
+export function SelfService() {
+ return (
+
+
+
+ {field.required && "Required"}
+
+
+
+
+
+ + {field.description} +
+
-
-
-
- {
- activeTab.name === 'Services' &&
-
- {catalogSlug}
-
-
-
-
-
-
-
- {iconElement}
-
+
- case 'number':
- return
- case 'boolean':
- return onChange(v)}/>
- default:
- return
-}
diff --git a/frontend/src/components/self-service/SelfServiceTabService.tsx b/frontend/src/components/self-service/SelfServiceTabService.tsx
deleted file mode 100644
index ea122b9..0000000
--- a/frontend/src/components/self-service/SelfServiceTabService.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {useState} from "react";
-import EmptyState from "@/components/common/EmptyState.tsx";
-import SelfServiceCard from "@/components/self-service/SelfServiceCard.tsx";
-import {Transition} from "@headlessui/react";
-import SelfServiceSlideOver from "@/components/self-service/SelfServiceSlideOver.tsx";
-
-interface Props {
- catalogSlug: string
- services: any[]
-}
-
-export default function SelfServiceTabService({catalogSlug, services}: Props) {
- const [showSideOver, setShowSideOver] = useState({show: false, service: {}}) // pass service
-
- if (services.length === 0) {
- return
- setShowSideOver({
- show: false,
- service: showSideOver.service
- })} catalogSlug={catalogSlug}/>
-
-
-}
diff --git a/frontend/src/components/self-service/fields/SwitchField.tsx b/frontend/src/components/self-service/fields/SwitchField.tsx
deleted file mode 100644
index 2f553f8..0000000
--- a/frontend/src/components/self-service/fields/SwitchField.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {Switch} from "@headlessui/react";
-import {classNames} from "@/lib/utils.ts";
-import {useState} from "react";
-
-interface Props {
- field: any;
- onChange?: (value: boolean) => void;
-}
-
-export default function SwitchField({field, onChange}: Props) {
- let defaultValue = false;
- if (field.default.toLowerCase() === 'true') {
- defaultValue = true;
- }
-
- const [enabled, setEnabled] = useState(defaultValue)
-
- return (
- ['inputMode'];
-}
-
-export default function TextField({field, inputMode}: Props) {
-
- return (
- (
+ WrappedComponent: React.ComponentType,
+ title: string
+) {
+ return function WithPageTitle(props: T) {
+ const setPageTitle = useSetAtom(pageTitleAtom);
+
+ useEffect(() => {
+ setPageTitle(title);
+ }, [setPageTitle]);
+
+ return (baseAtom: Atom): Atom> => {
+ const unwrappedAtom = unwrap(baseAtom, (prev) => prev);
+ return atom((get) => {
+ return get(unwrappedAtom) ?? get(baseAtom);
+ });
+};
diff --git a/frontend/src/lib/create-dynamic-schema.ts b/frontend/src/lib/create-dynamic-schema.ts
new file mode 100644
index 0000000..2a8bb21
--- /dev/null
+++ b/frontend/src/lib/create-dynamic-schema.ts
@@ -0,0 +1,52 @@
+import { Field } from "@/types/catalog.type";
+import * as yup from "yup";
+
+export type FieldSchema =
+ | yup.BooleanSchema
+ | yup.StringSchema
+ | yup.NumberSchema;
+
+/**
+ * Creates a dynamic schema from an array of field
+ * to be used inside of the execute service flow
+ * @param {Field[]} fields
+ * @returns {yup.AnyObject}
+ */
+export const createDynamicSchema = (
+ fields: Field[]
+): yup.AnyObjectSchema => {
+ const schema: Record = {} as Record<
+ keyof T,
+ FieldSchema
+ >;
+
+ for (const field of fields as Field[]) {
+ if (field.required) {
+ switch (field.type) {
+ case "boolean":
+ schema[field.slug as keyof T] = yup.boolean().required();
+ break;
+ case "number":
+ schema[field.slug as keyof T] = yup.number().required();
+ break;
+ default:
+ schema[field.slug as keyof T] = yup.string().required();
+ break;
+ }
+ } else {
+ switch (field.type) {
+ case "boolean":
+ schema[field.slug as keyof T] = yup.boolean();
+ break;
+ case "number":
+ schema[field.slug as keyof T] = yup.number();
+ break;
+ default:
+ schema[field.slug as keyof T] = yup.string();
+ break;
+ }
+ }
+ }
+
+ return yup.object(schema);
+};
diff --git a/frontend/src/lib/make-query-atoms.ts b/frontend/src/lib/make-query-atoms.ts
new file mode 100644
index 0000000..2ed5df7
--- /dev/null
+++ b/frontend/src/lib/make-query-atoms.ts
@@ -0,0 +1,78 @@
+import { FetchStatus, QueryFunction } from "@tanstack/react-query";
+import { Atom, Getter, atom } from "jotai";
+import {
+ AtomWithSuspenseQueryResult,
+ atomWithSuspenseQuery,
+ queryClientAtom,
+} from "jotai-tanstack-query";
+
+type QueryFn = QueryFunction<
+ Awaited,
+ (string | TParams)[],
+ never
+>;
+/**
+ * Generates an array of atoms for a query
+ * Under the hood, this uses jotai/tanstack-query to create the relevant atoms
+ *
+ * It returns an array composed of three atoms :
+ *
+ * - The Stale-while-revalidate data atom, which is async until first fetch
+ * - The status atom (fetchStatus)
+ * - The query atom (which is async)
+ *
+ * Example :
+ *
+ * ```typescript
+ * export const [productsAtom, productsStatusAtom] = makeQueryAtoms(
+ * 'inventoryProducts',
+ * (get) => get(fetchProductsParamsAtom),
+ * (params) => () => {
+ * return fetch(params)
+ * }
+ * )
+ * ```
+ * @param key React-Query query key
+ * @param getParameters Function to get parameters for the query
+ * @param queryFn Function to call to generate the query
+ * @returns
+ */
+export function makeQueryAtoms(
+ key: string,
+ getParameters: (get: Getter) => TParams,
+ queryFn: (params: TParams) => QueryFn, TParams>
+): [
+ Atom>,
+ Atom<{ fetchStatus: FetchStatus }>
+] {
+ const queryAtom = atomWithSuspenseQuery((get) => {
+ const params = getParameters(get);
+
+ const qParams = {
+ queryKey: [key, params],
+ queryFn: queryFn(params),
+ };
+
+ return qParams;
+ });
+ queryAtom.debugLabel = key;
+
+ const statusAtom = atom((get) => {
+ get(queryAtom);
+ const params = getParameters ? getParameters(get) : undefined;
+ const queryClient = get(queryClientAtom);
+ const state = queryClient.getQueryState>([
+ key,
+ params,
+ ]);
+ return state
+ ? {
+ fetchStatus: state.fetchStatus,
+ }
+ : {
+ fetchStatus: "idle" as FetchStatus,
+ };
+ });
+
+ return [queryAtom, statusAtom];
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 2455bb1..3cf64a8 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,23 +1,23 @@
-import {type ClassValue, clsx} from "clsx"
-import {twMerge} from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
+ return twMerge(clsx(inputs));
}
export function classNames(...classes: any[]): string {
- return classes.filter(Boolean).join(' ')
+ return classes.filter(Boolean).join(" ");
}
export function millisToHumanTime(duration: number): string {
- let milliseconds = Math.floor((duration % 1000) / 100)
- let seconds = Math.floor((duration / 1000) % 60)
- let minutes = Math.floor((duration / (1000 * 60)) % 60)
- let hours = Math.floor((duration / (1000 * 60 * 60)) % 24)
+ let milliseconds = Math.floor((duration % 1000) / 100);
+ let seconds = Math.floor((duration / 1000) % 60);
+ let minutes = Math.floor((duration / (1000 * 60)) % 60);
+ let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
- let s_hours = (hours < 10) ? "0" + hours : hours;
- let s_minutes = (minutes < 10) ? "0" + minutes : minutes;
- let s_seconds = (seconds < 10) ? "0" + seconds : seconds;
+ let s_hours = hours < 10 ? "0" + hours : hours;
+ let s_minutes = minutes < 10 ? "0" + minutes : minutes;
+ let s_seconds = seconds < 10 ? "0" + seconds : seconds;
return s_hours + ":" + s_minutes + ":" + s_seconds + "." + milliseconds;
}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index a06eb7a..b843d88 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,38 +1,29 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './main.css'
-import {QueryClient, QueryClientProvider,} from '@tanstack/react-query'
-import {createBrowserRouter, RouterProvider,} from "react-router-dom";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import "./main.css";
-import Root from "./routes/root";
-// @ts-ignore
-import ErrorPage from "@/error-page.jsx";
import AppShell from "@/components/AppShell.tsx";
+import SelfServiceWithTitle from "./components/self-service/SelfService";
+import { Providers } from "./providers";
const router = createBrowserRouter([
{
path: "/",
- element:
-
-
-
- ,
-)
+
+
+
+);
diff --git a/frontend/src/providers.tsx b/frontend/src/providers.tsx
new file mode 100644
index 0000000..83b942c
--- /dev/null
+++ b/frontend/src/providers.tsx
@@ -0,0 +1,36 @@
+import { QueryClient } from "@tanstack/query-core";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { Provider as JotaiProvider, createStore } from "jotai";
+import { DevTools } from "jotai-devtools";
+
+function getQueryClient() {
+ return new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 60 * 1000,
+ },
+ },
+ });
+}
+
+export const Providers: React.FC<{
+ children: React.ReactNode;
+}> = ({ children }) => {
+ const queryClient = getQueryClient();
+ const jotaiStore = createStore();
+
+ return (
+
+
+ {process.env.NODE_ENV === "development" && (
+ <>
+
+
+ );
+};
diff --git a/frontend/src/routes/root.tsx b/frontend/src/routes/root.tsx
deleted file mode 100644
index 2b73e6d..0000000
--- a/frontend/src/routes/root.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import AppShell from "@/components/AppShell.tsx";
-
-
-export default function Root() {
- return
+ (
+ selectedService?.fields as Field[],
+ ),
+ ),
+ mode: "onChange",
+ });
+
+ const {
+ mutateAsync: executeService,
+ status,
+ error,
+ } = useAtomValue(executeServiceMutation);
+
+ const handleSubmit = async (payload: ExecuteServicePayload) => {
+ await executeService(payload);
+ setCreateDialogOpened(false);
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/self-service/SelfServiceEditDialog.tsx b/frontend/src/components/self-service/SelfServiceEditDialog.tsx
new file mode 100644
index 0000000..bd1037c
--- /dev/null
+++ b/frontend/src/components/self-service/SelfServiceEditDialog.tsx
@@ -0,0 +1,16 @@
+import { DialogIds } from "@/enums/dialog-ids.enum";
+import { useAtomValue } from "jotai";
+import Dialog from "../common/Dialog";
+import { selectedServiceAtom } from "@/atoms/service.atoms";
+
+export interface SelfServiceEditProps {}
+
+export function SelfServiceEditDialog() {
+ const selectedService = useAtomValue(selectedServiceAtom);
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/self-service/SelfServiceRunSidebar.tsx b/frontend/src/components/self-service/SelfServiceRunSidebar.tsx
new file mode 100644
index 0000000..7eb04ac
--- /dev/null
+++ b/frontend/src/components/self-service/SelfServiceRunSidebar.tsx
@@ -0,0 +1,18 @@
+import { runsAtom } from "@/atoms/run.atoms";
+import EmptyState from "@/components/common/EmptyState.tsx";
+import SelfServiceRunTable from "@/components/self-service/SelfServiceRunTable.tsx";
+import { useAtom } from "jotai";
+
+export default function SelfServiceRunSidebar() {
+ const [{ data, status, error }] = useAtom(runsAtom);
+
+ if (data.length === 0) {
+ return (
+
- )
+ );
}
diff --git a/frontend/src/components/self-service/SelfServiceSlideOver.tsx b/frontend/src/components/self-service/SelfServiceSlideOver.tsx
deleted file mode 100644
index 0ce6b41..0000000
--- a/frontend/src/components/self-service/SelfServiceSlideOver.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import {Fragment} from 'react'
-import {Dialog, Transition} from '@headlessui/react'
-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 {API_URL} from "@/config.ts";
-
-interface Props {
- catalogSlug: string;
- service: any;
- onClose: () => void;
-}
-
-function getField(field: any, onChange: (value: any) => void): JSX.Element {
- switch (field.type) {
- case 'text':
- return
+
- )
+ );
}
diff --git a/frontend/src/components/self-service/SelfServiceCatalog.tsx b/frontend/src/components/self-service/SelfServiceCatalog.tsx
new file mode 100644
index 0000000..548ded0
--- /dev/null
+++ b/frontend/src/components/self-service/SelfServiceCatalog.tsx
@@ -0,0 +1,82 @@
+import {
+ catalogsAtom,
+ selectedCatalogSlugAtom,
+ selectedServiceSlugAtom,
+} from "@/atoms/catalog.atoms";
+import { dialogOpenedAtomFamily } from "@/atoms/dialog.atoms";
+import EmptyState from "@/components/common/EmptyState.tsx";
+import SelfServiceCard from "@/components/self-service/SelfServiceCard.tsx";
+import { DialogIds } from "@/enums/dialog-ids.enum";
+import { useAtom, useSetAtom } from "jotai";
+import { SelfServiceCreateDialog } from "./SelfServiceCreateDialog";
+import { SelfServiceEditDialog } from "./SelfServiceEditDialog";
+
+export default function SelfServiceCatalog() {
+ const [{ data }] = useAtom(catalogsAtom);
+ const setSelectedCatalogSlug = useSetAtom(selectedCatalogSlugAtom);
+ const setSelectedServiceSlug = useSetAtom(selectedServiceSlugAtom);
+
+ const [createDialogOpened, setCreateDialogOpened] = useAtom(
+ dialogOpenedAtomFamily(DialogIds.CreateService),
+ );
+
+ const [editDialogOpened, setEditDialogOpened] = useAtom(
+ dialogOpenedAtomFamily(DialogIds.EditService),
+ );
+
+ if (data.length === 0) {
+ return (
+
+ {getIcon(service.icon)}
-
+ -
+
- Fields +
- {service.fields.length || "---"} +
+
+
+
+ {service.description}
+
+
+
+ );
+ }
+
+ const handleOnCreateClicked = (serviceSlug: string, catalogSlug: string) => {
+ setCreateDialogOpened(true);
+ setSelectedCatalogSlug(catalogSlug);
+ setSelectedServiceSlug(serviceSlug);
+ };
+
+ const handleOnEditClicked = (serviceSlug: string, catalogSlug: string) => {
+ setEditDialogOpened(true);
+ setSelectedCatalogSlug(catalogSlug);
+ setSelectedServiceSlug(serviceSlug);
+ };
+
+ return (
+ <>
+ -
+ {data.map((catalog) => (
+
-
+
{catalog.name}
+-
+ {catalog.services.map((service) => (
+
-
+
+ handleOnCreateClicked(service.slug, catalog.slug) + } + onEditClicked={() => + handleOnEditClicked(service.slug, catalog.slug) + } + onViewRunsClicked={() => {}} + /> +
+ ))}
+
+ ))}
+ -
+
+
+ );
+ }
+
+ return
@@ -60,64 +63,96 @@ export default function SelfServiceRunTable({runs}: Props): JSX.Element {
-
| - Date - | -- Service - | -- Status - | -- Tasks - | -- Execution Time - | -- Edit - | -||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| + Date + | ++ Service + | ++ Status + | ++ Tasks + | ++ Execution Time + | ++ Edit + | +||||||
| - {run.created_at} - | -- {run.service_slug} - | -
-
-
-
-
+ {runs.map((run) => (
+
+ {run.created_at}
+ |
+
+ {run.service_slug}
+ |
+
+ |
-
+
+
-
+
+
+
+ {run.status}
+
{run.status}
-
- {totalSuccessTasks(run.tasks)}/{run.tasks.length} |
- {millisToHumanTime(getTotalExecutionTime(run.tasks))} |
-
-
- Details, {run.name}
-
- |
- |
+ + {totalSuccessTasks(run.tasks)}/{run.tasks.length} + | ++ {millisToHumanTime(getTotalExecutionTime(run.tasks))} + | ++ + Details, {run.name} + + | +
'{field.type}' is not a supported field
- } -} - -export default function SelfServiceSlideOver({catalogSlug, service, onClose}: Props): JSX.Element { - - const handleSubmit = (event: any) => { - event.preventDefault() - - const fields = [] - for (const [id, value] of new FormData(event.target)) { - fields.push([id, value]) - } - - const payload = Object.fromEntries(fields) - - 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) - }) - } - - return ( - - ) -} diff --git a/frontend/src/components/self-service/SelfServiceTabRun.tsx b/frontend/src/components/self-service/SelfServiceTabRun.tsx deleted file mode 100644 index 85458ca..0000000 --- a/frontend/src/components/self-service/SelfServiceTabRun.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import EmptyState from "@/components/common/EmptyState.tsx"; -import {useQuery} from "@tanstack/react-query"; -import {API_URL} from "@/config.ts"; -import {useEffect, useState} from "react"; -import SelfServiceRunTable from "@/components/self-service/SelfServiceRunTable.tsx"; - -interface Props { - catalogSlug: string -} - -export default function SelfServiceTabRun({catalogSlug}: Props) { - const [runs, setRuns] = useState([]) - - const {status, data} = useQuery({ - queryKey: [`catalogs-${catalogSlug}-runs`], - queryFn: () => - fetch(`${API_URL}/catalogs/${catalogSlug}/runs`).then( - (res) => res.json(), - ), - }) - - useEffect(() => { - if (status === 'success') { - setRuns(data.results) - } - }, [status, data]); - - if (runs.length === 0) { - return
-
- }
-
- return
-
- }
-
- return <>
-
- {
- services.map((service, idx) => {
- return {
- setShowSideOver({show: true, service: service})
- }}/>
- })
- }
-
-
-
- )
-}
diff --git a/frontend/src/components/self-service/fields/TextField.tsx b/frontend/src/components/self-service/fields/TextField.tsx
deleted file mode 100644
index eaaa70f..0000000
--- a/frontend/src/components/self-service/fields/TextField.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {InputHTMLAttributes} from "react";
-
-interface Props {
- field: any;
- inputMode?: InputHTMLAttributes
-
-
- {field.required && 'Required'}
-
-
-
-
-
-
- {field.description}
-
-
- {
- if (onChange) {
- onChange(v)
- }
- setEnabled(v)
- }}
- className={classNames(
- enabled ? 'bg-indigo-600' : 'bg-gray-200',
- 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
- )}
- >
-
-
-
-
-
-
- )
-}
diff --git a/frontend/src/components/self-service/fields/TextareaField.tsx b/frontend/src/components/self-service/fields/TextareaField.tsx
deleted file mode 100644
index 60a460d..0000000
--- a/frontend/src/components/self-service/fields/TextareaField.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-interface Props {
- field: any;
-}
-
-export default function TextareaField({field}: Props) {
-
- return (
-
-
-
- {field.required && 'Required'}
-
-
-
-
-
-
-
- )
-}
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index bfeb16b..eddf36c 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -1 +1,2 @@
-export const API_URL: string = import.meta.env.VITE_API_URL || "http://localhost:9999";
+export const API_URL: string =
+ import.meta.env.VITE_API_URL || "http://localhost:9999";
diff --git a/frontend/src/enums/dialog-ids.enum.ts b/frontend/src/enums/dialog-ids.enum.ts
new file mode 100644
index 0000000..a46a3f0
--- /dev/null
+++ b/frontend/src/enums/dialog-ids.enum.ts
@@ -0,0 +1,4 @@
+export enum DialogIds {
+ CreateService = "CreateService",
+ EditService = "EditService",
+}
diff --git a/frontend/src/enums/theme-colors.enum.ts b/frontend/src/enums/theme-colors.enum.ts
new file mode 100644
index 0000000..020d577
--- /dev/null
+++ b/frontend/src/enums/theme-colors.enum.ts
@@ -0,0 +1,4 @@
+export enum ThemeColors {
+ PRIMARY = "primary",
+ SECONDARY = "secondary",
+}
diff --git a/frontend/src/error-page.jsx b/frontend/src/error-page.jsx
deleted file mode 100644
index 28c22ce..0000000
--- a/frontend/src/error-page.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {useRouteError} from 'react-router-dom'
-
-export default function ErrorPage() {
- const error = useRouteError()
- console.error(error)
-
- return (
-
-
- {field.required && 'Required'}
-
-
-
-
-
- {field.description}
-
-
)
-}
diff --git a/frontend/src/hoc/with-page-title.tsx b/frontend/src/hoc/with-page-title.tsx
new file mode 100644
index 0000000..8fe1db0
--- /dev/null
+++ b/frontend/src/hoc/with-page-title.tsx
@@ -0,0 +1,18 @@
+import { pageTitleAtom } from "@/atoms/navigation.atoms";
+import { useSetAtom } from "jotai";
+import React, { useEffect } from "react";
+
+export function withPageTitleOops!
-Sorry, an unexpected error has occurred.
-- {error.statusText || error.message} -
-