125 deploy reconfigure mode

src/components/Deploy/DeployDag/DeployDag.tsx

@@ -1,18 +1,21 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
-import { FilterTypeEnum } from 'src/clients/tdpClient'
+import { FilterTypeEnum, Operation } from 'src/clients/tdpClient'
 import { Button } from 'src/components/commons'
 import { NavigationBar } from 'src/components/Layout/primitives'
 import { DagContextProvider, DeployModeEnum } from './context'
+import { useDagDeploy, useDeployDagRequest } from './hooks'
 import {
   DeployModeField,
   FilterField,
   OperationsField,
   RestartField,
 } from './fields'
-import { PreviewDagDeploy } from './PreviewDagDeploy'
+import { DeployPreview } from '../DeployPreview'
+import { useTdpClient } from 'src/contexts'
 
 export function DeployDag() {
+  const [displayPreview, setDisplayPreview] = useState(false)
   return (
     <DagContextProvider
       initialState={{
@@ -21,40 +24,96 @@ export function DeployDag() {
         restart: false,
       }}
     >
-      <DagForm />
+      {!displayPreview ? <DagForm /> : <DagPreview />}
+      <NavigationBar className="sticky bottom-0 bg-white py-3">
+        {!displayPreview ? (
+          <BackToNewButton />
+        ) : (
+          <BackToFormButton setDisplayPreview={setDisplayPreview} />
+        )}
+        {!displayPreview ? (
+          <PreviewButton setDisplayPreview={setDisplayPreview} />
+        ) : (
+          <DeployButton />
+        )}
+      </NavigationBar>
     </DagContextProvider>
   )
 }
 
 function DagForm() {
-  const [displayPreview, setDisplayPreview] = useState(false)
-
-  if (displayPreview)
-    return <PreviewDagDeploy setDisplayPreview={setDisplayPreview} />
-
   return (
     <form className="flex flex-col gap-7">
       <DeployModeField />
       <OperationsField />
       <FilterField />
       <RestartField />
-      <NavigationBar>
-        <Button
-          as="Link"
-          href="/deploy/new"
-          className="flex items-center gap-1"
-        >
-          <ChevronLeftIcon className="h-5 w-5" />
-          Back
-        </Button>
-        <Button
-          onClick={() => setDisplayPreview(true)}
-          className="flex items-center gap-1"
-        >
-          Preview
-          <ChevronRightIcon className="h-5 w-5" />
-        </Button>
-      </NavigationBar>
     </form>
   )
 }
+
+function DagPreview() {
+  const [operationsPreview, setOperationsPreview] = useState<Operation[]>([])
+  const { planDeployDag } = useTdpClient()
+  const dagRequest = useDeployDagRequest()
+
+  useEffect(() => {
+    const fetchPreview = async () => {
+      const operations = await planDeployDag(dagRequest)
+      setOperationsPreview(operations)
+    }
+    fetchPreview()
+  }, [planDeployDag, dagRequest])
+
+  return <DeployPreview operations={operationsPreview} />
+}
+
+const PreviewButton = ({
+  setDisplayPreview,
+}: {
+  setDisplayPreview: (value: boolean) => void
+}) => (
+  <Button
+    onClick={() => setDisplayPreview(true)}
+    className="flex items-center gap-1"
+  >
+    Preview
+    <ChevronRightIcon className="h-5 w-5" />
+  </Button>
+)
+
+const BackToNewButton = () => (
+  <Button as="Link" href="/deploy/new" className="flex items-center gap-1">
+    <ChevronLeftIcon className="h-5 w-5" />
+    Back
+  </Button>
+)
+
+function DeployButton() {
+  const deployDag = useDagDeploy()
+  const dagRequest = useDeployDagRequest()
+
+  return (
+    <Button
+      as="button"
+      variant={'filled'}
+      onClick={() => deployDag(dagRequest)}
+    >
+      Deploy
+    </Button>
+  )
+}
+
+const BackToFormButton = ({
+  setDisplayPreview,
+}: {
+  setDisplayPreview: (value: boolean) => void
+}) => (
+  <Button
+    onClick={() => setDisplayPreview(false)}
+    className="flex items-center gap-1"
+  >
+    <ChevronLeftIcon className="h-5 w-5" />
+    Back
+  </Button>
+)

src/components/Deploy/DeployPreview.tsx

@@ -0,0 +1,46 @@
+import { Operation } from 'src/clients/tdpClient'
+import { classNames } from 'src/utils'
+
+export function DeployPreview({ operations }: { operations: Operation[] }) {
+  return (
+    <table className="table-auto border border-gray-200 mx-auto">
+      <thead className="border-b px-4 text-gray-800">
+        <tr>
+          <th className="px-4">Order</th>
+          <th className="px-4">Operation</th>
+          <th className="px-4">Collection</th>
+          <th className="px-4">Noop</th>
+        </tr>
+      </thead>
+      <tbody className="text-gray-600">
+        {operations.map((op, index) => (
+          <OperationRow key={op.name} operation={op} index={index} />
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+function OperationRow({
+  operation,
+  index,
+}: {
+  operation: Operation
+  index: number
+}) {
+  const { name, collectionName, noop } = operation
+  return (
+    <tr
+      key={index}
+      className={classNames(
+        'border-b',
+        index % 2 === 0 ? undefined : 'bg-gray-100'
+      )}
+    >
+      <td className="text-center px-4">{index + 1}</td>
+      <td className="px-4">{name}</td>
+      <td className="text-center px-4">{collectionName}</td>
+      <td className="text-center px-4">{noop ? 'Yes' : 'No'}</td>
+    </tr>
+  )
+}

src/components/Deploy/index.ts

@@ -1,3 +1,4 @@
 export { DeployDag } from './DeployDag'
 export { DeployOperations } from './DeployOperations'
 export { DeployLogs } from './DeployLogs'
+export { DeployPreview } from './DeployPreview'

src/pages/deploy/new/index.tsx

@@ -20,10 +20,16 @@ const deployModes: DeployModes = {
     href: '/deploy/new/dag',
   },
   operations: {
-    title: 'Deploy from a list',
+    title: 'Deploy operations',
     description: 'Launch a list of operation in the desired order.',
     href: '/deploy/new/operations',
   },
+  reconfigure: {
+    title: 'Reconfigure',
+    description:
+      'Restart required services after configuration modification(s).',
+    href: '/deploy/new/reconfigure',
+  },
 }
 
 const DeployModeStep = () => {

src/pages/deploy/new/reconfigure.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { ChevronLeftIcon } from '@heroicons/react/24/solid'
+import { Operation } from 'src/clients'
+import { useTdpClient } from 'src/contexts'
+import { Button } from 'src/components/commons'
+import { DeployPreview } from 'src/components/Deploy'
+import { NavigationBar } from 'src/components/Layout'
+
+import DeployLayout from 'src/app/dashboard/deploy/layout'
+import DashboardLayout from 'src/app/dashboard/layout'
+
+const ReconfigurePage = () => {
+  const [preview, setPreview] = useState<Operation[]>([])
+  const { planDeployReconfigure, reconfigureDeploy } = useTdpClient()
+
+  useEffect(() => {
+    const fetchPreview = async () => {
+      try {
+        const operations = await planDeployReconfigure()
+        setPreview(operations)
+      } catch (e) {
+        console.error(e)
+      }
+    }
+    fetchPreview()
+  }, [planDeployReconfigure])
+
+  return (
+    <>
+      <DeployPreview operations={preview} />
+      <NavigationBar className="sticky bottom-0 bg-white py-3">
+        <Button
+          as="Link"
+          href="/deploy/new"
+          className="flex items-center gap-1"
+        >
+          <ChevronLeftIcon className="h-5 w-5" />
+          Back
+        </Button>
+        <Button
+          as="button"
+          variant={'filled'}
+          onClick={() => reconfigureDeploy()}
+        >
+          Deploy Reconfigure
+        </Button>
+      </NavigationBar>
+    </>
+  )
+}
+
+ReconfigurePage.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <DashboardLayout>
+      <DeployLayout>{page}</DeployLayout>
+    </DashboardLayout>
+  )
+}
+
+export default ReconfigurePage