tracardi / tracardi-gui

Tracardi ReactJs Graphical User Interface

Explore Tracardi Documentation · ⭐️ Support the project · 👨‍💻 Join community · 📺 Watch tutorials on YOUTUBE

Open-source Customer Engagement and Data Platform

TRACARDI is an API-first solution, low-code / no-code platform aimed at any business that wants to start using user data for automated customer engagement. Tracardi is intended for anyone who carries out any type of customer interaction, be it through sales or service delivery. Tracardi collects data from customer journeys and assigns it to a profile, automates data enhancement, facilitates 🚀 Machine Learning APIs usage.

⭐️ Screenshots

✨ Features

Use TRACARDI for:

• Customer Data Integration - You can ingest, aggregate and store customer data from multiple sources in real time at any scale and speed due to elastic search backend.

• Customer Data Modelling - You can manage data. Define rules that will model data delivered from your page and copy it into user profile. You can segment customers into custom segments.

• User Experience Personalization - You can personalize user experience with real-time customer segmentation and targeting.

• Profile Unification - You can merge customer data from various sources to single profile. Auto de-duplicate customer records. Blend customers in one account.

• Automation - TRACARDI is a great framework for creating marketing automation apps. You can send your data to other systems easily

If you want to see Tracardi in action subscribe to our 📺 Youtube channel.

👇 Installation and getting started

The easiest way to run TRACARDI is to run it as a 🐳 docker container. Please install docker and docker-compose on your local machine then clone tracardi/tracardi-api

git clone https://github.com/Tracardi/tracardi-api.git

Go to TRACARDI API folder, and run one line command:

docker-compose up

Visit http://127.0.0.1:8787 and complete installation in Tracardi GUI.

👇 Other types of installation

There are other types of installation. All are described in detail in our documentation.

👇 Need help ?

Join our community	Visit YouTube Channel	Tweet with us

👇 Documentation

• System documentation is available at: http://docs.tracardi.com.
• Api documentation is always available after installation at http://127.0.0.1:8686/docs.
• Tracardi has also build-in documentation into the system.

👇 Call for contributors

Have you found a bug 🐛 ? Or maybe you have a nice feature ✨ to contribute ? The CONTRIBUTING guide will help you get your development environment ready in minutes.

👇 Support us

If you would like to support us please follow us on:

• Facebook
• Twitter, tag us and leave your comments.
• Subscribe to our Youtube channel to see development process and new upcoming features.
• ⭐️ Start TRACARDI GitHub project - it really matters and puts a smile on our faces.

We appreciate any help that helps make TRACARDI popular.

👇 Donate

You can support us on Open Collective

👇 Referral programs

Support us via referral programs. If you buy service from the following link to support the project.

👇 License

TRACARDI is available under MIT with Common Clause license.

👇 Recent activities

tracardi-gui's Issues

Consider using reaviz for diagrams

• https://github.com/reaviz/reaviz

Bug: /home/events page, the events detail list can't dynamic update

route: /home/events

bug detail:
when the filter button on /home/events is clicked, the bar charts is dynamic updated, but the events' detail info list is not updated unless the page is refreshed.

Add props to components

We have been developing very fast. A lot of components does not have propTypes set. The code needs some factoring and the props would be very useful.

Just pick one component and add props definition.

Component Icon Selector

Component for icon selection.

This component is for replacing icon in plugin.

Wire frame

Icons to be listed in a popover are listed in FlowNodeIcons component.

example

        "store": <FiDatabase size={20}/>,
        "json": <VscJson size={20}/>,
        "split": <BiGitRepoForked size={20} style={{ transform: "rotateX(180deg)"}}/>,
        "join": <BiGitRepoForked size={20} />,

Full page for user management - this one requires #73

This task require the tasks

• #73

Task

• Add a list of users
• Add [New user] button and a drawer with new user form - see #31

Front-end: build a pie chart for main dashboard.

Front-end: build a pie chart for profile details page.

FrontEnd: Create Page for user management

Create page with the following fields

    username: text
    password: text
    full_name: text
    email: text
    roles: selct [admin,manager,user]
    disabled: switch

Use TuiForm.

props:

• onSubmit - returns all the data from form

Add conditional JSON forms

Now forms are static and can not change depending on selected values.

FrontEnd: Form to add consent type

Add form for Consent type:

    name: str
    description: str
    revokable: bool
    default_value: str

Wrap the form in:

<TuiForm>
      <TuiFormGroup>
        <TuiFormGroupHeader header="Schedule task" />
        <TuiFormGroupContent>
          <TuiFormGroupField>
             // You form here
           </TuiFormGroupField>
        </TuiFormGroupContent>
      </TuiFormGroup>
    </TuiForm>

props:

onSubmit - returns all the data from form

Widget: Question popup

A popup window with a question and 2 answers.

Input

• Position vertical I horizontal: eg. top, right
• Two answers
• Event type to raise when an answer is clicked

Send query to /track endpoint.

Use material UI widgets

Documentation on getting started with micro frameworks.

http://docs.tracardi.com/development/micro_frontend/

Display Workflow schema and version.

A popup window that shows information on WF version an schema.

Component: Copy traits component

Component props

Component must have the following props

• value - default value - see below the schema of value
• onChange - function that must be triggered when the value changes.

Component wireframe

Value of component

This components holds the list of strings that defines what should be copied to what.

Schema of the value:

{
  "copy": {
    "target1": "source1",
    "target2": "source2"
  }
}

Real example:

{
  "copy": {
    "[email protected]": "[email protected]",
    "[email protected]": "[email protected]",
  }
}

this copies [email protected] to [email protected], etc.

When the elements receives default value it must populate it to its list.

Ready to use components

Some components are already in tracardi so no need to prepare it.

This component is called:

DottedPathInput({value, label, onChange, error = false, helperText = null, width=460})

DottedValue = ({children, onDelete})

Show version info on nodes

When the system is updated new nodes are inserted and new need information on the version. Although we can see it on info tab it would be more convenient to see the version on node list.

Yarn start error

On windows we can not make yarn start.

The work around it to remove from package.json:

"start": "chmod +x ./env.sh && ./env.sh && mv env-config.js ./public/ && react-scripts start",

and add:

"start": "react-scripts start",

Null date on first start of Tracardi

Date is set to null on first set of tracardi. Set date to now.

Black theme

Some users prefer black theme for Tracardi. That could be a nice feature. Create a context for the black there, And find the places where we use colors and put it in the theme.

List of running tracardi instances.

Task description

Create a page with information on running tracardi instances. This should be a simple list with the information fetched from /instances endpoint.

Introduction

Tracardi registers an information on every instance that is created on cluster. That information consists of:

• ip of tracardi server
• start_time - when the instance started
• timestamp - when the instance was updated
• track_requests - number of track request consumed by the instance
• track_rpc - number of track requests per second
• all_track_requests = all track requests consumed from start time.

That information is updated once per minute.

We need to display this information in form of list. The number of instances can be quite big as 1 docker container can start about 15 instances, and on the production there can be 10-20 dockers running.
So it is quite common to have 150 instances of tracardi. Maybe loading when scrolling can be a good option for this component.

Before you start

Please watch a short introduction video to tracardi front-end development.

https://youtu.be/CindWbesUSg

This will explain how to get get local tracardi-api running on your computer.

Where to implement the list

Find file Instances.js in /src/components/pages.
This is the place to implement the list. Additional components place in /src/components/elements/lists.

Data

Data about running instances can be retrieved for endpoint GET /instances.

Example of response:

{
  "total": 1,
  "result": [
    {
      "id": "2bb9b654-899c-45f2-9ef4-26ebcd6f928c",
      "ip": "172.20.10.11",
      "timestamp": "2021-09-21T11:43:59.153012",
      "all_track_requests": 0,
      "track_requests": 0,
      "track_rps": 0
    }
  ]
}

We have a simple request function that loads data from endpoints. Usage example:

useEffect(() => {
        request({
                url: "/instances",
                method: "GET"
            },
            (l) => {},  // sets l=true when loading, l=false when ready
            (e) => {},  // runs on error
            (response) => { // on response ready
                if (response) {
                    console.log(response);
                }
            }
        )
    }, [])

Check for new react flow component.

New react flow seems to solve problem of too thin edges.

Add new scheduled form to list of scheduled events.

Add this form

• #31

To list of scheduled events.

• Add [new scheduled event] button
• Connect the button with drawer that adds new event using #31

Get a reveal key for resource authenication data

When we display Resource details we also display Auth data. This is not secure. Add Reveal key that will display this data only if pressed.

DateFrom value toggles negative / positive on filter

When clicking the button to set the minimum date, the value toggles between negative and positive. Clicking filter while the value is positive results in an API error.

Consent type form and list

• Form that will add consents to tracardi using the enpoint Tracardi/tracardi#204
• List of consents with the delete on every row:

Endpoints:

• Tracardi/tracardi#206
• Tracardi/tracardi#205

Form components:

Use Mui components

"id": , : Hidden
"name": input,
"description": textarea,
"revokable": switch,
"default_value": select[grant|deny]

Styling

Use TuiForm for styling:
https://github.com/Tracardi/tracardi-gui/tree/master/src/components/elements/tui

Example:
https://github.com/Tracardi/tracardi-gui/blob/master/src/components/elements/details/ProfileDetails.js

Second save to resource drop-down removes resource id

When you save twice the plugin form then the id from resource id is removed.

Data becomes:

 "source": {
    "name": "Tracker endpoint",
    "id": "Tracker endpoint"
  }

Must repair default state that comes form value prop.

Remove remember me from LoginForm

Not needed.

There is some issue with item caching on event list

Check how the items are cached.

On the event list. session list, and profile list, the items are not refreshed.

The component that is not refreshing: MemoObjectRow. See it the memo is the problem and if so fix it.

function rowsAreEqual(prevRow, nextRow) {
    return prevRow.id === nextRow.id;
}

export const MemoObjectRow = React.memo(ObjectRow, rowsAreEqual);

Can not add/select event type on Segementation Form

Plugin that sends event to Google Analitics

Plugin sends information from event to google analytics.

It may need configuration to reshape data to meet google analytics criteria.

Add headers to event list.

Now events, profiles and sessions does not have headers - so the user does not know what is he looking at.

Add inject action

Add inject action that returns configured values.

Form: New form for adding scheduled events

Task

Create a form like this. This form should have onSubmit property which is called when submit is clicked. It should pass all form data as object.

Use:

• TimeInput - this one may need some tweeking to fit the needs.
• JsonEditor
• Button form elements/components/form

Wrap the form in:

<TuiForm>
      <TuiFormGroup>
        <TuiFormGroupHeader header="Schedule task" />
        <TuiFormGroupContent>
          <TuiFormGroupField>
             // You form here
           </TuiFormGroupField>
        </TuiFormGroupContent>
      </TuiFormGroup>
    </TuiForm>

New edge on WF diagram

Intro

Consider implementing https://github.com/tisoap/react-flow-smart-edge as a default edge for Workflow diagram.

Reveal section in Resource datails page

Intro

When you click on resource details all data is displayed.

There is no HTTPS version of GUI

Problem

If we run a HTTPs version of API there is no easy way you can connect GUI to HTTPS API.

You can run GUI like this.

docker run -p 8787:80 -e API_URL=https://127.0.0.1:8686 tracardi/tracardi-gui

This connects HTTP GUI with HTTPs API. This may cause the following error.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed

There is a need for https version of GUI.

Reference

https://stackify.com/how-to-configure-https-for-an-nginx-docker-container/
https://faun.pub/setting-up-ssl-certificates-for-nginx-in-docker-environ-e7eec5ebb418
http://nginx.org/en/docs/http/configuring_https_servers.html#single_http_https_server

I get the following error Uncaught TypeError: Cannot read property 'getState' of undefined on chrome browser

Uncaught TypeError: Cannot read property 'getState' of undefined
at i ((index):65)
at HTMLScriptElement. ((index):65)

New settings page

This page should consist of all setting from env variables.

Endpoint

Not ready yet. Scheduled: https://github.com/atompie/tracardi/issues/100

Display information on conflict between GUI and API on Login form

Intro

There may be a conflict between version of API and GUI. We need to display this so a user could update the GUI not have issues with communication to API.

Task

Add an alert The GUI version does not match API version on login form, when the GUI version does not equal to server version. Get server version from GET /info/version and GUI version from function version() - location src/misc/version.js

Add Tracardi API endpoint to Login Form

Intro

We need to add an Input to Login form that allows user to type API Endpoint that the GUI should connect to.

Task

Add free solo Auto Complete material element to Login Form.The value typed to this element should be saved in localStorage for further reuse. Two values should be saved - selected value and historical values. Use tracardi-api-urls as key for historical list of api urls, and trcardi-api-url for currently selected value.

Description

Fee solo element allows you to type any value or select it form the drop-down list. When there is new value save it in local storage as element of the list and display it later in drop-down list. If there is value in local storage populate the element value and add historical values the drop-down. Do not add new historical values if they exist in local storage.

Reference

Free solo Auto Complete

Changed/Edited resource is not visible on details page.

Info

When you edit resource then the change is not immediately reflected on details page. You have to refresh the page.

Key value component

Description

Component that add key values to object

Design

Props

• onChange - called when the object is changed
• value - default value - must fill the list of values.

State

The state of this component is an object. It is passed to onChange on every change.

{
"key1": value1,
"key2": value1,
} 
``

Component: Time input

Intro

Component that can take 3 different type of data:

• Date
• Time delta, e.g + 1m, +10s
• Time interval e.g. every 10s, every 1m

All this data can be typed in 1 component.

Component props

Component must have the following props

• value
• onChange
• disabled

Design

Component has icon with drop down. With 3 values that tell what data type will be inserted.

• Date
• Time delta
• Time interval

Each time the user changes the type of data the value field changes.

Date variant

Time delta variant

Time interval variant

Values returned

Examples:

• Date: ISO formated date
• Delta: +1m (for + 1 minute), etc.
• Interval: 1m (for every 1 minute)

Similar components.

• DottedPathInput

On event details page: FLOW debug need flow name.

It is hard to find out what flow had an error is there is no flow name. One event can be processed by many workflows.

Component: List of tracardi settings

Description

Component that allows to display and display tracardi settings.

This component is dependent on the following features:

• https://github.com/atompie/tracardi/issues/100

This component will be used here:

• http://localhost:3000/settings

Features

This component should list all settings returned from and /settings endpoint:

[
{
"env": "ELASTIC_HOST",
"label": "Elastic host url",
"description": "This is the location of elastic backend database"
},
...
]

in form of:

Component: New event details card.

This feature requires some UI design.

Currently event page looks like this

So there is a need to provide new design for event details card.

Credentials in both production and test version

Resources must have both versions. One is run debug mode one in production mode.

Generic table component based on react-window

We need a generic table component that we could use to display data. The data can be huge so using react-window is a must (https://github.com/bvaughn/react-window).

Row height will not be variant - this is the requirement for react-window. This component should auto load on scroll.

It should be flexible enough to add new columns. It could look like this.

<Table data={}>
  <Column header="Name">{name}</Column>
  <Column header="Surname">{surname}</Column>
</Table>

Maybe the children needs to be a function like this (if react window needs this):

<Table data={} columns={["Name", "Surname]}>
  {(data) => (<Column header="Name">{data.name}</Column>
  <Column header="Surname">{data.surname}</Column>
  )}
</Table>

This is up to you how you structure the component as long as it is flexible enough to pass data and modify the display of single column.

Widget: Survey widget

Widget with survey

Input

Inputs should be passed to widget as data-.. atributtes

• data-question
• data-answers - string separated with commas
• data-type-of-answer, possible values: many, single
• data-event-type to raise
• data-button-label
• data-position of the pop-up (e.g. top, right)

Send query to /track endpoint.

Tips

• Use material UI widgets (https://mui.com/)

The widget should present the survey and depending on the answer type allow the user to select 1 or many answers. Then answers should be sent to tracardi /track endpoint.

It is a POST endpoint - and documentation on how to send data can be found here: http://docs.tracardi.com/events/event_tracking/

For the dev purposes You may need to run a docker container with Tracardi API (this is where the /track endpoint is).

More on how to install tracardi here:
http://docs.tracardi.com/installation/docker/

List of scheduled tasks.

At http://localhost:3000/setup/tasks there is a place for new list of scheduled tasks.

Endpoint

http://localhost:8686/tasks/page/0

Use this endpoint to fetch paged data.

It will return scheduled events with its status.

How to add new tasks to scheduler.

Use:

curl -X 'POST' \
  'http://localhost:8686/tasks' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer 3a08e1d1e4c555daa33b77a893ffc8976d79e133411610ca168ba71ac5d0c0e8' \
  -H 'Content-Type: application/json' \
  -d '[
  {
    "id": "string",
    "timestamp": 0,
    "event": {
      "id": "string",
      "metadata": {
        "time": {
          "insert": "2021-10-01T23:04:23.700Z"
        },
        "ip": "string"
      },
      "type": "string",
      "properties": {},
      "source": {
        "id": "string"
      },
      "session": {
        "id": "string"
      },
      "profile": {
        "id": "string"
      },
      "context": {
        "config": {},
        "params": {}
      },
      "options": {}
    },
    "status": "pending"
  }
]'

It wont work if you do not provide you auth token.

You can use http://localhost:8686/docs to Authorize and use try it out for http://localhost:8686/tasks from the manual to add tasks.

Extend plugin import with upgrade

Add checkbox for upgrade.

Create component for JSON to FORM converter

Introduction

We must replace JSONs in node configuration with forms. To do that we will need to provide a JSON that will create forms.

Json example

{
  "form": {
    "title": "Form title"
  },
  "group1": {
    "description": "Group description",
    "fields": [
      {
        "copy.traits.to": {
          "element": "text",
          "label": "Copy traits to",
          "description": "Field description",
          "placeholder": "profile@traits...",
          "required": true,
          "validation": {
            "regex": "^[a-zA-Z0–9 ]+$",
            "message": "Only contain alphanumeric characters allowed"
          }
        }
      },
      {
        "copy.traits.from": {
          "element": "text",
          "label": "Copy traits from",
          "description": "Field description",
          "placeholder": "event@traits...",
          "required": true,
          "validation": {
            "regex": "^[a-zA-Z0–9 ]+$",
            "message": "Only contain alphanumeric characters allowed"
          }
        }
      }
    ]
  }
}

Help materials

https://github.com/rjsf-team/react-jsonschema-form/
https://www.botsplash.com/post/convert-your-json-to-forms-in-react