PipelineDetails Embeddable Guide
The PipelineDetails
embeddable allows you to view, manage, and update nuvo pipelines within your own application, whether you want to enable internal teams or your customers to handle pipeline details. Like all nuvo pipeline components, the PipelineDetails
embeddable is easy to use and integrate.
This guide will help you implement the PipelineDetails
component and show how to configure it based on your specific requirements:
- Install the nuvo package
- Get your nuvo license key
- Get the access token
- Implement the embeddable component in your application
- Configure the component based on your specific use case
Let's get started
Step 1: Install the nuvo package
Installing the nuvo package is super easy.
Install the React package with NPM:
npm install @getnuvo/pipelines-react
Install it with Yarn:
yarn add @getnuvo/pipelines-react
Step 2: Get your nuvo license key
You can get your nuvo license key from the nuvo User Platform.
If you don’t have an account yet, you can sign up here.
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:
- You want your internal users to view and update pipelines
- You want your customers to view and update pipelines
You want your internal users to view and update pipelines
- To get the access token for an internal user, you need to first create a user in the nuvo dashboard or use the user API
- 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 -X 'POST'
'https://api-gateway.getnuvo.com/dp/api/v1/auth/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 and update pipelines
- To get the access token for your customer, you need to first create a sub-organization (sub-org) via the sub-organization API
- 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 -X 'POST'
'https://api-gateway.getnuvo.com/dp/api/v1/auth/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:
import { PipelineDetails } from "@getnuvo/pipelines-react";
import "@getnuvo/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:
<PipelineDetails
accessToken=string
pipelineId=string
settings={{
i18nOverrides: {},
language: "en",
modal: false,
allowTdmCreation: false,
allowInputConnectorCreation: false,
allowOutputConnectorCreation: false
}}
onExecutionRun={({data}) => {
// runs when the user presses 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
}}
onClose={() => {
// runs when the creation workflow is closed via the "Cancel" button or the "X" button
}}
onPipelineDelete={({data}) => {
// runs when the pipeline is deleted via "Delete" button
// data: deleted pipeline object
}}
onConnectorCreate={({reload, connectorType}) => {
// runs when the user presses the "Create connector" button
// reload: on function call, refetch the connectors
// connectorType: "input" or "output"
}}
onTdmCreate={({reload}) => {
// runs when the user presses the "Create target data model" button
// reload: on function call, refetch the TDMs
}}
/>
accessToken
Add here your access token
pipelineId
Add here the ID of the pipeline you want to display
settings
i18nOverrides
Allows you to override each text element in the interface
language
Defines the language of the flow. 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
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 after the user has clicked on the "Delete"-button in the 3-dot menu
onConnectorCreate
Runs after the user has clicked on the "Create connector" button in the input or output connector selection dropdown when updating the setup of the pipeline
onTdmCreate
Runs after the user has clicked on the "Create target data model" button in the target data model selection dropdown when updating the setup of the pipeline
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