tree: 06d0a2b6351e1b721e7a378fcadd31fc71f5895a [path history] [tgz]
  1. api/
  2. components/
  3. context/
  4. dag/
  5. datasets/
  6. types/
  7. utils/
  8. App.tsx
  9. calendar.js
  10. connection_form.js
  11. dag.js
  12. dag_code.js
  13. dag_dependencies.js
  14. dags.js
  15. datetime_utils.js
  16. duration_chart.js
  17. gantt.js
  18. graph.js
  19. index.d.ts
  20. main.js
  21. openDatasetModal.js
  22. README.md
  23. task.js
  24. task_instances.js
  25. theme.ts
  26. ti_log.js
  27. trigger.js
  28. variable_edit.js
airflow/www/static/js/README.md

Grid View

In 2.3.0 the Tree view was completely rebuilt using React and renamed to Grid. Here is a primer on the new technologies used:

React

The most popular javascript framework for building user interfaces with reusable components. Written as javascript and html together in .jsx files. In-component state can be managed via useState(), application state that spans many components can be managed via a context provider (see /context for examples), API state can be managed by React Query (see below)

Chakra UI

A good component and helper function library. Tooltips, modals, toasts, switches, etc are all out of the box Styles are applied via global theme when initializing the app or inline with individual components like <Box padding="5px" />

React Query

A powerful async data handler that makes it easy to manage loading/error states as well as caching, refetching, background updates, etc. This is our state management for any data that comes from an API. Each API request is its own hook. Ie useTasks will get all the tasks for a DAG

React Testing Library

Easily write tests for react components and hooks