Skip to main content

PipelineDetails Embeddable Guide

The PipelineDetails embeddable allows you to view and manage individual Ingestro pipelines directly within your application. This component provides detailed information about a specific pipeline, including its configuration, execution history, and status.

This guide will help you implement the PipelineDetails component and configure it based on your specific requirements:

  1. Install the Ingestro package
  2. Get your Ingestro license key
  3. Get the access token
  4. Implement the embeddable component in your application
  5. Configure the component based on your specific use case

Let's get started​

Step 1: Install the Ingestro package​

Installing the Ingestro package is super easy.

Install with NPM:

React
Angular
Vue
VanillaJS
npm install @ingestro/pipelines-react

Install with Yarn:

React
Angular
Vue
VanillaJS
yarn add @ingestro/pipelines-react

Install via CDN:

VanillaJS
https://unpkg.com/@ingestro/pipelines-vanilla-js

Step 2: Get your Ingestro license key​

You can get your Ingestro license key from the Ingestro User Platform.

If you don't have an account yet, you can sign up here.

info

Please note that pipelines in development mode only send the first 100 rows to your defined output destination. If you would like to increase your quota, please contact us at [email protected].

Step 3: Get the access token​

In order to authorise yourself or rather the component you have to first get the access token via our authentication API.

You can get access tokens for two different cases:

  1. You want your internal users to view pipelines
  2. You want your customers to view pipelines

You want your internal users to view pipelines

  1. To get the access token for an internal user, you need to first create an user in the Ingestro User Platform or use the user API
  2. Use the user's email address and your license key to request the access token. Here is the cURL or JavaScript request you can use to get the access token:
cURL
Javascript
curl -X 'POST' 'https://api-gateway.ingestro.com/dp/api/v1/access/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": E-MAIL,
    "type": "USER"
  }
}' # Replace LICENSE_KEY with your license key & E-MAIL with a user's email

You want your customers to view pipelines

  1. To get the access token for your customer, you need to first create a sub-organization (sub-org) via the sub-organization API
  2. Use the sub-orgs's identifier and your license key to retrieve the access token. Here is the cURL or JavaScript request you can use to retrieve the access token:
cURL
Javascript
curl -X 'POST' 'https://api-gateway.ingestro.com/dp/api/v1/access/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d {
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": SUB_ORG_IDENTIFIER,
    "type": "SUB_ORG"
  }
}  # Replace LICENSE_KEY with your license key & SUB_ORG_IDENTIFIER with a sub-org identifier

Step 4: Implement the embeddable component in your application​

With the package installed, you can add the PipelineDetails component to your application.

First, import the component in the file where you want to use the PipelineDetails component:

React
Angular
Vue
VanillaJS
import { PipelineDetails } from "@ingestro/pipelines-react";
import "@ingestro/pipelines-react/index.css";

Step 5: Configure the component based on your specific use case​

Add the code snippet below and insert the component on the page where you want it to appear:

React
Angular
Vue
VanillaJS
<PipelineDetails
  accessToken="ACCESS_TOKEN"
  pipelineId="6695093afg66536c28b97222"
  settings={{
    i18nOverrides: {},
    language: "en",
    modal: true,
    allowTdmCreation: false,
    allowInputConnectorCreation: false,
    allowOutputConnectorCreation: false,
    showExecutionList: false,
  }}
  onExecutionRun={({ data }) => {
    // runs when the user clicks the "Run" button and an execution is triggered
    // data: execution object after update
  }}
  onPipelineUpdate={({ data }) => {
    // runs after the pipeline is updated via the "Edit setup" flow, "Edit configuration" flow, the "Active" toggle or the "Dev mode" toggle
    // data: pipeline object after update
  }}
  onPipelineDelete={({ data }) => {
    // runs when the pipeline is deleted via "Delete" button
    // data: deleted pipeline object
  }}
  onConnectorCreate={({ reload, connectorType }) => {
    // runs when the user clicks the "Create connector" button
    // reload: on function call, refetch the connectors
    // connectorType: "input" or "output"
  }}
  onTdmCreate={({ reload }) => {
    // runs when the user clicks the "Create target data model" button
    // reload: on function call, refetch the TDMs
  }}
  onExecutionView={({ data }) => {
    // runs when the user clicks the "View" or "Fix" button of an execution
    // data: execution object of the selected execution
  }}
  onClose={() => {
    // runs when the creation workflow is closed via the "Cancel" button or the "X" button
  }}
/>

accessToken

Add here the access token you've got in Step 3

pipelineId

Add here the ID of the pipeline you want to display details for

settings

i18nOverrides

Allows you to override each text element in the interface

language

Defines the language of the embeddable (so far we only support English ("en"))

modal

Defines whether the component is shown inline (false) or within a modal view (true)

allowTdmCreation

Defines whether the "Create target data model" button is shown in the target data model selection dropdown when updating the setup of the pipeline

allowInputConnectorCreation

Defines whether the "Create connector" button is shown in the input connector selection dropdown when updating the setup of the pipeline

allowOutputConnectorCreation

Defines whether the "Create connector" button is shown in the output connector selection dropdown when updating the setup of the pipeline

showExecutionList

Defines whether the ExecutionList embeddable is shown at the bottom of the details page. The ExecutionList displays all related executions, including their status, timestamp, and duration, along with options to view or download successful executions, or fix failed ones.

onExecutionRun

Runs after the user has triggered the rerun of the execution

onPipelineUpdate

Runs after the user saved changes they made to the pipeline

onPipelineDelete

Runs when the user clicks on the "Delete" button in the 3-dot menu

onConnectorCreate

Runs when the user clicks on the "Create connector" button in the input or output connector selection dropdown when updating the setup of the pipeline

onTdmCreate

Runs when the user clicks on the "Create target data model" button in the target data model selection dropdown when updating the setup of the pipeline

onExecutionView

Runs when the user clicks the “View” or “Fix” button of an execution. When defined, each execution entry in the execution list shows a chevron on the right side that triggers this hook when clicked.

onClose

Runs when the user tries to exit the "Pipeline Details" flow by closing the modal using the "X" button or clicking outside the modal