Airflow UI POC

Built with:

• React - a JavaScript library for building user interfaces
• TypeScript - extends JavaScript by adding types.
• Neutrino - lets you build web and Node.js applications with shared presets or configurations.
• Chakra UI - a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.
• React Query - powerful async data handler. all API calls go through this
• React Testing Library - write tests that focus on functionality instead of implementation

Installation

Clone the repository and use the package manager yarn to install the project's dependancies.

yarn install

Create your local environment

cp .env.example .env

Development

Modify local Airflow to allow API connections. For Breeze development, add the following to files/airflow-breeze-config/variables.env:

export AIRFLOW__API__AUTH_BACKEND=airflow.api.auth.backend.basic_auth
export AIRFLOW__API__ACCESS_CONTROL_ALLOW_HEADERS=*
export AIRFLOW__API__ACCESS_CONTROL_ALLOW_METHODS=*
export AIRFLOW__API__ACCESS_CONTROL_ALLOW_ORIGIN=http://127.0.0.1:28080

Start local Webserver:

airflow webserver

Start the UI application:

yarn start

Be sure to check out our best practices

File Hierarchy

src/views - Page entry points, everything starts here
src/containers - Reusable data containers
src/components - Reusable components
src/utils - Reusable helper functions