npm package: @ingestro/pipelines-vanilla-js
Description: VanillaJS ingestro pipeline adapter
Latest version: 1.5.1

<!-- markdownlint-disable -->
<p align="center">
  <a href="https://ingestro.com/" rel="noopener" target="_blank"><img width="150" src="https://s3.eu-central-1.amazonaws.com/general-upload.ingestro.com/ingestro_logo_darkblue.svg" alt="Ingestro logo"></a>
</p>
<h1 align="center">@ingestro/pipelines-vanilla-js</h1>

<div align="center">
Embeddable Vanilla JS Components for Ingestro Data Pipelines

[![API status](https://img.shields.io/uptimerobot/ratio/m792354517-acd98c6100961072cc093759?color=2fa659&label=uptime)](https://status.ingestro.com/)
[![npm latest package](https://img.shields.io/npm/v/@ingestro%2Fpipelines-vanilla-js?color=5c8ef2&label=npm@latest)](https://badge.fury.io/js/@ingestro%2Fpipelines-vanilla-js)

A Vanilla JS component library that lets your users embed UI workflows for creating and managing Ingestro Data Pipelines directly into your applications.

</div>

## Table of Contents

- [What is Ingestro Data Pipelines](#what-is-ingestro-data-pipelines)
- [Features & Components](#features--components)
- [Authentication](#authentication)
- [Getting Started](#getting-started)
- [Embeddables Usage](#embeddables-usage)
- [Using the API Directly](#using-the-api-directly)
- [Configuration & Props](#configuration--props-general)
- [Further Resources](#further-resources)

## What is Ingestro Data Pipelines

Ingestro Data Pipelines is a full pipeline product that enables you to build, deploy, monitor and manage automated data ingestion workflows. Key capabilities include:

- Defining **connectors** (inputs/outputs) for various sources/destinations
- Specifying **target data models** (TDMs) to shape output schema
- Building & running **pipelines**, including scheduling, execution history, error tracking
- Embeddable Vanilla JS UI components ("embeddables") so you can embed parts of the workflow in your own app
- A REST API for full programmatic control

## Features & Components

Here are the main components/ embeddables available in this package. Use them to provide UI workflows for your users inside your application. For full docs, see the [Embeddables Guide](https://docs.ingestro.com/dp/embeddables/).

| Embeddable               | Purpose                                                       |
| ------------------------ | ------------------------------------------------------------- |
| `CreatePipeline`         | UI to create a new pipeline workflow within your app          |
| `PipelineDetails`        | View / edit a specific pipeline                               |
| `PipelineList`           | Show a list of all pipelines                                  |
| `ExecutionDetails`       | View, inspect and optionally rerun a particular execution run |
| `ExecutionList`          | List of executions for one pipeline                           |
| `CreateConnector`        | UI to add a new connector (input/output) for your pipelines   |
| `ConnectorDetails`       | Inspect/ modify a connector                                   |
| `ConnectorList`          | List available connectors                                     |
| `CreateTargetDataModel`  | UI to create a target data model (TDM)                        |
| `TargetDataModelDetails` | View or edit one TDM                                          |
| `TargetDataModelList`    | Listing of TDMs                                               |

## Authentication

To use the embeddables or call the API directly, you’ll need an **access token**. The flow is:

1. Get your **license key** (from dashboard.ingestro.com)
2. You authenticate using the license key + an identifier (either a user email or a sub-organization identifier). ([Authentication API guide](https://docs.ingestro.com/dp/authentication-api/))
3. You receive an `access_token` which you include in subsequent requests

**Example: Get an access token**

```bash
curl -X POST "https://api-gateway.ingestro.com/dp/api/v1/auth/access-token"
  -H "Accept: application/json"
  -H "Content-Type: application/json"
  -d '{
    "license_key": "YOUR_LICENSE_KEY",
    "auth": {
      "identifier": "user@example.com",  // or sub-org identifier
      "type": "USER"                     // or "SUB_ORG"
    }
  }'
```

Response:

```json
{
  "access_token": "YOUR_ACCESS_TOKEN"
}
```

## Getting Started

Install the package:

```bash
npm install @ingestro/pipelines-vanilla-js
# or
yarn add @ingestro/pipelines-vanilla-js
```

Include required CSS:

```jsx
import '@ingestro/pipelines-vanilla-js/index.css';
```

## Embeddables Usage

Here’s how to embed a component in your Vanilla JS app. All embeddables accept props such as `accessToken`, `settings`, and callbacks (e.g. `onClose`, `onCreate`, etc.). Always consult the specific guide for the embeddable you're using in the [Embeddables docs](https://docs.ingestro.com/dp/embeddables/).

**Example for `CreatePipeline`:**

```js
<div class="ingestro-container"></div>

<script type="module">
  import { CreatePipeline } from '@ingestro/pipelines-vanilla-js';

  CreatePipeline('.ingestro-container', {
    accessToken: "ACCESS_TOKEN",
    templateId: "TEMPLATE_ID",
    configuration: {
      developerMode: false,
      name: "string",
      tdmId: "string",
      outputConnectorId: "string",
      inputConnectorId: "string",
      errorConfig: {
        errorThreshold: 0,
      },
      scheduleConfig: {
        frequency: "HOURLY",
        interval: 0,
        startsOn: new Date(),
        endsOn: new Date(),
      }
    },
    settings: {
      i18nOverrides: {},
      language: "en",
      modal: true,
      allowTdmCreation: false,
      allowInputConnectorCreation: false,
      allowOutputConnectorCreation: false,
      runPipelineOnCreation: false
    },
    onPipelineCreate: ({ data }) => {
      // Handle pipeline creation
    },
    onClose: () => {
      // Handle close
    },
    onConnectorCreate: ({ reload, connectorType }) => {
      // Handle connector creation
    },
    onTdmCreate: ({ reload }) => {
      // Handle TDM creation
    },
    onExecutionView: ({ data }) => {
      // Handle execution view
    },
  });
</script>
```

## Using the API Directly

If you want full control (e.g. automated processes, server-side integrations, or custom UI), you can use the REST API. See the [REST API guide](https://docs.ingestro.com/dp/guide-api/) and relevant sub-APIs.

**Example: Get all pipelines**

```bash
curl -X GET "https://api-gateway.ingestro.com/dp/api/v1/pipeline/"
  -H "Accept: application/json"
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"

```

**Example: Update a pipeline**

```bash
curl -X PUT "https://api-gateway.ingestro.com/dp/api/v1/pipeline/{pipelineId}"
  -H "Accept: application/json"
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
  -H "Content-Type: application/json"
  -d '{
    "name": "New pipeline name",
    "configuration": {},
    "input_connectors": [],
    "output_connectors": [],
    "mapping_config": {}
  }'

```

## Configuration & Props (General)

Some common props/settings across embeddables:

| Prop / Setting  | Description                                                               |
| --------------- | ------------------------------------------------------------------------- |
| `accessToken`   | Token obtained via authentication API (must be passed to all embeddables) |
| `settings`      | UI settings like language, modal behavior, translations etc.              |
| `configuration` | Embeddable-specific configuration options (defaults, initial values)      |
| Callbacks       | Events such as `onClose`, `onCreate`, `onUpdate`, `onError` etc.          |

## Further Resources

- [Authentication API guide](https://docs.ingestro.com/dp/authentication-api/)
- [Embeddables documentation](https://docs.ingestro.com/dp/embeddables/)
- [REST API guide](https://docs.ingestro.com/dp/guide-api/)
- [Connector API docs](https://docs.ingestro.com/dp/connector-api/)
- [Target Data Model API docs](https://docs.ingestro.com/dp/tdm-api/)