-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #122 from MiladSadeghi/master
Update Web App to Ansible API Services
- Loading branch information
Showing
29 changed files
with
998 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export const OSOptions = [ | ||
| { | ||
| value: 'ubuntu', | ||
| label: 'Ubuntu', | ||
| }, | ||
| ]; | ||
|
|
||
| export const versionOptions = [ | ||
| { | ||
| label: 'Latest', | ||
| value: 'latest', | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.