Update Web App to Ansible API Services

web/src/App.tsx

@@ -12,12 +12,16 @@ import {
   Installation,
   S3,
 } from '@/pages';
+import { AnsibleLayout } from './pages/ansible/components/layout';
+import DockerAnsible from './pages/ansible/docker/docker';
+import NginxAnsible from './pages/ansible/nginx/nginx';
+import KubernetesAnsible from './pages/ansible/kuber/kuber';
 
 function App() {
   const location = useLocation();
   return (
     <div>
-      <div className="container mx-auto border-l border-r border-gray-700 h-dvh max-w-7xl">
+      <div className="container mx-auto h-dvh max-w-7xl border-l border-r border-gray-700">
         <Routes location={location}>
           <Route element={<MainLayout />}>
             <Route index element={<Basic />} />
@@ -30,6 +34,11 @@ function App() {
               <Route path="iam" element={<IAM />} />
               <Route path="argocd" element={<Argocd />} />
             </Route>
+            <Route path="ansible-template" element={<AnsibleLayout />}>
+              <Route path="docker" element={<DockerAnsible />} />
+              <Route path="nginx" element={<NginxAnsible />} />
+              <Route path="kuber" element={<KubernetesAnsible />} />
+            </Route>
             <Route path="installation" element={<Installation />} />
           </Route>
         </Routes>

web/src/components/form/form-input.tsx

@@ -4,7 +4,15 @@ import { FormFieldProps } from '../../types/form.types';
 import { getNestedValue } from '@/lib/helper';
 import { cn } from '@/lib/utils';
 
-export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
+export const FormInput = ({
+  name,
+  label,
+  error,
+  isNumber,
+  inputType,
+  inputClass,
+  ...props
+}: FormFieldProps) => {
   const {
     register,
     formState: { errors },
@@ -21,20 +29,27 @@ export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
       name={name}
     >
       {label && (
-        <div className="mb-2 flex items-baseline justify-between">
-          <Form.Label className="form-label">{label} :</Form.Label>
+        <div className="flex items-baseline justify-between mb-1">
+          <Form.Label className="form-label">{label}</Form.Label>
         </div>
       )}
       <Form.Control asChild>
         <input
-          className="w-full rounded-md border border-gray-200 px-3 py-2 outline-none dark:border-none"
-          {...register(name)}
+          type={inputType}
+          className={cn(
+            'w-full rounded-md border border-gray-500 px-3 py-2 outline-none transition-all focus:border-orange-base',
+            props.className,
+            {
+              'border-red-500 dark:border': errorMessage,
+            },
+          )}
+          {...register(name, { ...(isNumber && { valueAsNumber: true }) })}
           {...props}
         />
       </Form.Control>
       {errorMessage && (
         <div className="absolute left-0 top-full">
-          <Form.Message className="form-message ml-auto text-sm text-red-500">
+          <Form.Message className="ml-auto text-sm text-red-500 form-message">
             {errorMessage}
           </Form.Message>
         </div>

web/src/components/form/form-select.tsx

@@ -4,9 +4,9 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { FormFieldProps } from '../../types/form.types';
 import Select from 'react-select';
 import { getNestedValue } from '@/lib/helper';
-import { selectStyle } from '@/pages/helm-template/styles/helm-template.style';
 import { useStyle } from '@/hooks';
 import { cn } from '@/lib/utils';
+import { selectStyle } from '@/styles/select.styles';
 
 interface OptionType {
   value: string;
@@ -46,8 +46,8 @@ export const FormSelect = ({
       name={name}
     >
       {label && (
-        <div className="mb-2 flex items-baseline justify-between">
-          <Form.Label className="form-label">{label} :</Form.Label>
+        <div className="mb-1 flex items-baseline justify-between">
+          <Form.Label className="form-label">{label}</Form.Label>
         </div>
       )}
       <Form.Control asChild>
@@ -61,7 +61,7 @@ export const FormSelect = ({
               placeholder={placeholder}
               className="w-full"
               {...props}
-              styles={selectStyle(darkMode)}
+              styles={selectStyle(darkMode, !!errorMessage)}
             />
           )}
         />

web/src/components/form/form-wrapper.tsx

@@ -16,7 +16,7 @@ export const FormWrapper = <T extends z.ZodType>({
   methods,
 }: FormWrapperProps<T>) => {
   return (
-    <FormProvider {...methods} >
+    <FormProvider {...methods}>
       <Form.Root
         onSubmit={methods.handleSubmit(onSubmit)}
         className="text-black dark:text-white"

web/src/components/navbar/navbar.tsx

@@ -11,18 +11,22 @@ const navbar = [
     url: '/bug-fix',
     title: 'Bug Fix',
   },
-  {
-    url: '/terraform-template',
-    title: 'Terraform Template',
-  },
   {
     url: '/installation',
     title: 'Installation',
   },
+  {
+    url: '/terraform-template',
+    title: 'Terraform Template',
+  },
   {
     url: '/helm-template',
     title: 'Helm Template',
   },
+  {
+    url: '/ansible-template',
+    title: 'Ansible Template',
+  },
 ];
 
 const Navbar: FC = () => {

web/src/enums/api.enums.ts

@@ -12,3 +12,9 @@ export enum API {
   Installation = '/IaC-install',
   HelmTemplate = '/Helm-template',
 }
+
+export enum AnsibleTemplateAPI {
+  Docker = '/ansible-install/docker',
+  Nginx = '/ansible-install/nginx',
+  Kubernetes = '/ansible-install/kuber',
+}

web/src/pages/ansible/components/layout.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { NavLink, Outlet } from 'react-router';
+
+const menu = [
+  {
+    url: 'nginx',
+    title: 'Nginx Service',
+  },
+  {
+    url: 'docker',
+    title: 'Docker Service',
+  },
+  {
+    url: 'kuber',
+    title: 'Kubernetes Service',
+  },
+];
+
+export const AnsibleLayout: FC = () => {
+  return (
+    <div className="flex h-[calc(100vh-56px)] items-center">
+      <div className="flex h-full w-full max-w-96 flex-col items-center justify-center divide-y divide-gray-500 border-r border-gray-500">
+        {menu.map((link) => (
+          <NavLink
+            key={link.url}
+            to={link.url}
+            className={({ isActive }) =>
+              `block w-full p-4 text-center text-black outline-none transition-all dark:text-white ${isActive ? 'bg-orange-base text-white' : ''}`
+            }
+          >
+            {link.title}
+          </NavLink>
+        ))}
+      </div>
+      <div className="flex h-full w-2/3 items-center justify-center">
+        <Outlet />
+      </div>
+    </div>
+  );
+};

web/src/pages/ansible/docker/components/hosts-fields.tsx

@@ -0,0 +1,46 @@
+import { FormInput } from '@/components/form/form-input';
+import { Plus, Trash2 } from 'lucide-react';
+import { FC } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+const HostsField: FC = () => {
+  const { control } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'hosts',
+  });
+
+  return (
+    <div>
+      <div className="flex items-center mb-2">
+        <p className="text-lg font-bold">Hosts</p>
+        <button type="button" onClick={append} className="ml-4 btn btn-xs">
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((_, hostIdx) => (
+          <div className="relative" key={hostIdx}>
+            <FormInput
+              id={`hosts_input.${hostIdx}`}
+              name={`hosts.${hostIdx}.value`}
+              label=""
+              placeholder="www.example.com"
+            />
+            {hostIdx > 0 && (
+              <button
+                onClick={() => remove(hostIdx)}
+                className="absolute right-3 top-3"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HostsField;

web/src/pages/ansible/docker/data/select-options.ts

@@ -0,0 +1,13 @@
+export const OSOptions = [
+  {
+    value: 'ubuntu',
+    label: 'Ubuntu',
+  },
+];
+
+export const versionOptions = [
+  {
+    label: 'Latest',
+    value: 'latest',
+  },
+];

web/src/pages/ansible/docker/docker.tsx

@@ -0,0 +1,129 @@
+import { FC } from 'react';
+import {
+  dockerAnsibleSchema,
+  type DockerAnsible,
+  type DockerAnsibleBody,
+  type DockerAnsibleResponse,
+  type dockerTemplateValidationError,
+} from './docker.types';
+import { AnsibleTemplateAPI } from '@/enums/api.enums';
+import { useDownload } from '@/hooks';
+import { usePost } from '@/core/react-query';
+import { isAxiosError } from 'axios';
+import { toast } from 'sonner';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormWrapper } from '@/components/form/form-wrapper';
+import { FormInput } from '@/components/form/form-input';
+import HostsField from './components/hosts-fields';
+import { FormSelect } from '@/components/form/form-select';
+import { OSOptions, versionOptions } from './data/select-options';
+
+const DockerAnsible: FC = () => {
+  const defaultValues = {
+    ansible_user: '',
+    os: { label: 'Ubuntu', value: 'ubuntu' },
+    hosts: [{ value: '' }],
+    version: {
+      label: 'Latest',
+      value: 'latest',
+    },
+  };
+
+  const methods = useForm<DockerAnsible>({
+    resolver: zodResolver(dockerAnsibleSchema),
+    defaultValues,
+  });
+
+  const { mutateAsync: dockerAnsibleMutate, isPending: dockerAnsiblePending } =
+    usePost<DockerAnsibleResponse, DockerAnsibleBody>(
+      AnsibleTemplateAPI.Docker,
+      'ansible-docker',
+    );
+
+  const { download, isPending: downloadPending } = useDownload({
+    downloadFileName: 'DockerAnsible',
+    source: 'docker',
+    folderName: 'MyAnsible',
+  });
+
+  const handleSubmit = async (data: DockerAnsible) => {
+    try {
+      const body = {
+        ...data,
+        hosts: data.hosts.map((host) => host.value),
+        os: data.os.value,
+        version: data.version.value,
+      };
+
+      await dockerAnsibleMutate(body);
+      await download();
+    } catch (error) {
+      console.log(error);
+      if (isAxiosError<dockerTemplateValidationError>(error)) {
+        toast.error(
+          `${error.response?.data.detail[0].loc[error.response?.data.detail[0].loc.length - 1]} ${error.response?.data.detail[0].msg}`,
+        );
+      } else {
+        toast.error('Something went wrong');
+      }
+    }
+  };
+
+  return (
+    <div className="w-full max-w-96 text-black dark:text-white">
+      <FormWrapper methods={methods} onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_user"
+            name={`ansible_user`}
+            label="User"
+            placeholder="root"
+          />
+        </div>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_port"
+            name={`ansible_port`}
+            label="Port"
+            placeholder="22"
+            inputType={'number'}
+            isNumber={true}
+          />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`os`}
+            label="OS"
+            placeholder="Select..."
+            options={OSOptions}
+          />
+        </div>
+        <div className="mb-4">
+          <HostsField />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`version`}
+            label="Version"
+            placeholder="Select..."
+            options={versionOptions}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={dockerAnsiblePending}
+          className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
+        >
+          {dockerAnsiblePending
+            ? 'Generating...'
+            : downloadPending
+              ? 'Downloading...'
+              : 'Generate'}
+        </button>
+      </FormWrapper>
+    </div>
+  );
+};
+
+export default DockerAnsible;