feat(front): generate yaml compose file of stack (#94)

* feat(front): generate yaml compose file of stack * fix(yaml): eslint --------- Co-authored-by: Romain Dreidemy <[email protected]>
RomainDreidemy · Sep 6, 2023 · e870875 · e870875
1 parent 6a77a2e
commit e870875
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 10 deletions.
diff --git a/front/src/services/entities/Board.entity.ts b/front/src/services/entities/Board.entity.ts
@@ -27,7 +27,8 @@ const BoardEntity = {
     managedVolumeId: to.id
   }),
   deleteServiceVolumeLink: async (id: string): Promise<AxiosResponse<void>> => await axios.delete(`/service_managed_volume_links/${id}`),
-  updateServiceVolumeLink: async (serviceVolume: IServiceVolumeLinks): Promise<AxiosResponse<IServiceVolumeLinks>> => await axios.put(`/service_managed_volume_links/${serviceVolume.id}`, serviceVolume)
+  updateServiceVolumeLink: async (serviceVolume: IServiceVolumeLinks): Promise<AxiosResponse<IServiceVolumeLinks>> => await axios.put(`/service_managed_volume_links/${serviceVolume.id}`, serviceVolume),
+  generateComposeFile: async (id: string): Promise<AxiosResponse<string>> => await axios.get(`/stacks/${id}/docker_compose`),
 }
 
 export default BoardEntity
diff --git a/front/src/views/organisms/ComposeFileModal.organism.tsx b/front/src/views/organisms/ComposeFileModal.organism.tsx
@@ -0,0 +1,22 @@
+import React, { type ReactElement } from 'react'
+
+interface ComposeFileModalOrganismProps {
+  composeFileData: string
+}
+
+const ComposeFileModalOrganism = ({ composeFileData }: ComposeFileModalOrganismProps): ReactElement => {
+  return (
+    <dialog id="compose_file_modal" className="modal">
+      <div className="modal-box">
+        <textarea className="h-96 w-full" readOnly defaultValue={composeFileData} />
+        <div className="modal-action">
+          <form method="dialog">
+            <button className="btn">Close</button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+  )
+}
+
+export default ComposeFileModalOrganism
diff --git a/front/src/views/organisms/Manager.organism.tsx b/front/src/views/organisms/Manager.organism.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
 import EntityButtonAtom from '../atoms/forms/EntityButton.atom'
 import { DrawerTypes } from '../../enums/DrawerTypes'
 import useDrawerManager from '../../hooks/useDrawerManager'
+import Button from '../atoms/forms/Button.atom'
+import BoardEntity from '../../services/entities/Board.entity'
+import ComposeFileModalOrganism from './ComposeFileModal.organism'
 
 const ManagerOrganism = ({ stackId }: { stackId: string }): JSX.Element => {
   const { createEntityAndDraw, loading } = useDrawerManager(stackId)
+  const [composeFileData, setComposeFileData] = useState<string>()
 
   const createService = async (): Promise<void> => {
     await createEntityAndDraw(DrawerTypes.SERVICE)
@@ -16,18 +20,34 @@ const ManagerOrganism = ({ stackId }: { stackId: string }): JSX.Element => {
     await createEntityAndDraw(DrawerTypes.VOLUME)
   }
 
+  const generateYaml = async (): Promise<void> => {
+    window.compose_file_modal.showModal()
+    try {
+      const { data: yaml } = await BoardEntity.generateComposeFile(stackId)
+      setComposeFileData(yaml)
+    }
+    catch (e: any) {
+      console.log(e)
+    }
+  }
+
   return (
-    <div className="w-full h-full border-l-2 ">
-      <div className="h-[70px] border-b-2 p-2 flex flex items-center justify-between">
+    <div className="w-full h-full border-l-2 flex flex-col">
+      <div className="h-[70px] border-b-2 p-2 flex items-center justify-between">
         <h2>
           <strong>Manager</strong>
         </h2>
       </div>
 
-      <EntityButtonAtom name="Service" onClick={createService} disabled={loading}/>
-      <EntityButtonAtom name="Network" onClick={createNetwork} disabled={loading}/>
-      <EntityButtonAtom name="Volume" onClick={createVolume} disabled={loading}/>
+        <EntityButtonAtom name="Service" onClick={createService} disabled={loading}/>
+        <EntityButtonAtom name="Network" onClick={createNetwork} disabled={loading}/>
+        <EntityButtonAtom name="Volume" onClick={createVolume} disabled={loading}/>
+
+        <div className='justify-self-end'>
+          <Button label={'Generate yaml file'} variant="primary" onClick={() => generateYaml()}/>
+        </div>
 
+        <ComposeFileModalOrganism composeFileData={composeFileData} />
     </div>
   )
 }

diff --git a/front/src/views/organisms/Navbar.organism.tsx b/front/src/views/organisms/Navbar.organism.tsx
@@ -14,7 +14,6 @@ export const Navbar = (): JSX.Element => {
   return (
     <div className="navbar bg-base-100 border-b-2">
       <div className="navbar-start">
-        <Button label={'Export as file'} variant="primary"/>
       </div>
       <Link to="/stacks" className="navbar-center">
         <img src={'/assets/logo.png'} alt="logo" className={'w-60'}/>

diff --git a/front/src/views/organisms/NewStack.organism.tsx b/front/src/views/organisms/NewStack.organism.tsx
@@ -1,10 +1,10 @@
 import Input from '../atoms/forms/Input.atom'
 import Button from '../atoms/forms/Button.atom'
-import React, { useState } from 'react'
+import React, { type ReactElement, useState } from 'react'
 import StackEntity from '../../services/entities/Stack.entity'
 import { useNavigate } from 'react-router-dom'
 
-const NewStackOrganism = () => {
+const NewStackOrganism = (): ReactElement => {
   const [name, setName] = useState('')
 
   const navigate = useNavigate()