get pipeline status wip

apps/studio/components/interfaces/Replication/Pipelines.tsx

@@ -19,14 +19,16 @@ export const ReplicationPipelines = () => {
   const [showCreatePipelineModal, setShowCreatePipelineModal] = useState(false)
   const [showDeletePipelineModal, setShowDeletePipelineModal] = useState(false)
   const [pipelineIdToDelete, setPipelineIdToDelete] = useState(-1)
+  const [pipelineIdToStatus, setPipelineIdToStatus] = useState({ idToStatus: new Map() })
 
   const pipelines = pipelines_data ?? []
+
   return (
     <>
       <ScaffoldContainer>
         <ScaffoldSection>
           <div className="col-span-12">
-            <FormHeader title="Sinks"></FormHeader>
+            <FormHeader title="Pipelines"></FormHeader>
             <div className="space-y-4">
               <div className="flex items-center gap-2 flex-wrap">
                 <ButtonTooltip
@@ -49,6 +51,7 @@ export const ReplicationPipelines = () => {
                     <Table.th key="id">Id</Table.th>,
                     <Table.th key="source_id">Source Id</Table.th>,
                     <Table.th key="sink_id">Sink Id</Table.th>,
+                    <Table.th key="action">Action</Table.th>,
                     <Table.th key="edit">Edit</Table.th>,
                     <Table.th key="delete">Delete</Table.th>,
                   ]}
@@ -60,34 +63,55 @@ export const ReplicationPipelines = () => {
                         </Table.td>
                       </Table.tr>
                     ) : (
-                      pipelines.map((pipeline) => (
-                        <Table.tr key={pipeline.id}>
-                          <Table.td>{pipeline.id}</Table.td>
-                          <Table.td>{pipeline.source_id}</Table.td>
-                          <Table.td>{pipeline.sink_id}</Table.td>
-                          <Table.td>
-                            <Button
-                              type="default"
-                              onClick={() => {
-                                toast.info('Editing a pipeline is not yet implemented')
-                              }}
-                            >
-                              Edit
-                            </Button>
-                          </Table.td>
-                          <Table.td>
-                            <Button
-                              type="danger"
-                              onClick={() => {
-                                setPipelineIdToDelete(pipeline.id)
-                                setShowDeletePipelineModal(true)
-                              }}
-                            >
-                              Delete
-                            </Button>
-                          </Table.td>
-                        </Table.tr>
-                      ))
+                      pipelines.map((pipeline) => {
+                        const status = pipelineIdToStatus.idToStatus.get(pipeline.id)
+                        const actionButtonLoading = !status
+                        const pipelineStopped = !status || status === 'Stopped'
+                        const actionButtonLabel = actionButtonLoading
+                          ? 'Getting Status'
+                          : pipelineStopped
+                            ? 'Start'
+                            : 'Stop'
+                        return (
+                          <Table.tr key={pipeline.id}>
+                            <Table.td>{pipeline.id}</Table.td>
+                            <Table.td>{pipeline.source_id}</Table.td>
+                            <Table.td>{pipeline.sink_id}</Table.td>
+                            <Table.td>
+                              <Button
+                                onClick={() => {
+                                  toast.info('Starting a pipeline is not yet implemented')
+                                }}
+                                loading={actionButtonLoading}
+                              >
+                                {actionButtonLabel}
+                              </Button>
+                            </Table.td>
+                            <Table.td>
+                              {}
+                              <Button
+                                type="default"
+                                onClick={() => {
+                                  toast.info('Editing a pipeline is not yet implemented')
+                                }}
+                              >
+                                Edit
+                              </Button>
+                            </Table.td>
+                            <Table.td>
+                              <Button
+                                type="danger"
+                                onClick={() => {
+                                  setPipelineIdToDelete(pipeline.id)
+                                  setShowDeletePipelineModal(true)
+                                }}
+                              >
+                                Delete
+                              </Button>
+                            </Table.td>
+                          </Table.tr>
+                        )
+                      })
                     )
                   }
                 ></Table>

apps/studio/data/replication/keys.ts

@@ -6,4 +6,6 @@ export const replicationKeys = {
   tables: (projectRef: string | undefined, source_id: number) =>
     ['projects', projectRef, 'sources', source_id, 'tables'] as const,
   pipelines: (projectRef: string | undefined) => ['projects', projectRef, 'pipelines'] as const,
+  pipelinesStatus: (projectRef: string | undefined, pipelineId: number) =>
+    ['projects', projectRef, 'pipelines', pipelineId, 'status'] as const,
 }

apps/studio/data/replication/pipeline-status-query.ts

@@ -0,0 +1,41 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+
+import { get, handleError } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { replicationKeys } from './keys'
+
+type ReplicationPipelinesStatusParams = { projectRef?: string; pipelineId: number }
+
+async function fetchReplicationPipelineStatus(
+  { projectRef, pipelineId }: ReplicationPipelinesStatusParams,
+  signal?: AbortSignal
+) {
+  if (!projectRef) throw new Error('projectRef is required')
+
+  const { data, error } = await get('/platform/replication/{ref}/pipelines/{pipeline_id}/status', {
+    params: { path: { ref: projectRef, pipeline_id: pipelineId } },
+    signal,
+  })
+  if (error) {
+    handleError(error)
+  }
+
+  return data
+}
+
+export type ReplicationPipelineStatusData = Awaited<
+  ReturnType<typeof fetchReplicationPipelineStatus>
+>
+
+export const useReplicationPipelineStatusQuery = <TData = ReplicationPipelineStatusData>(
+  { projectRef, pipelineId }: ReplicationPipelinesStatusParams,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ReplicationPipelineStatusData, ResponseError, TData> = {}
+) =>
+  useQuery<ReplicationPipelineStatusData, ResponseError, TData>(
+    replicationKeys.pipelinesStatus(projectRef, pipelineId),
+    ({ signal }) => fetchReplicationPipelineStatus({ projectRef, pipelineId }, signal),
+    { enabled: enabled && typeof projectRef !== 'undefined', ...options }
+  )

packages/api-types/types/api.d.ts

@@ -3331,6 +3331,10 @@ export interface paths {
     /** Deletes a pipeline */
     delete: operations['ReplicationPipelinesController_deletePipeline']
   }
+  '/platform/replication/{ref}/pipelines/{pipeline_id}/status': {
+    /** Gets status of a pipeline */
+    get: operations['ReplicationPipelinesController_getPipelineStatus']
+  }
   '/platform/replication/{ref}/sinks': {
     /** Gets replication sinks */
     get: operations['ReplicationSinksController_getSinks']
@@ -21733,7 +21737,27 @@ export interface operations {
       200: {
         content: never
       }
-      /** @description Failed to delete pipelin */
+      /** @description Failed to delete pipeline */
+      500: {
+        content: never
+      }
+    }
+  }
+  /** Gets status of a pipeline */
+  ReplicationPipelinesController_getPipelineStatus: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string
+        /** @description Pipeline id */
+        pipeline_id: number
+      }
+    }
+    responses: {
+      200: {
+        content: never
+      }
+      /** @description Failed to get pipeline status */
       500: {
         content: never
       }