artfxdev / harvest-ui

Harvest: statistics dashboard for Pixar's Tractor render farm

Harvest UI 👨‍🌾👩‍🌾🌾

Statistics dashboard for Pixar's Tractor render farm

Introduction

Harvest is a realtime front-end application to display useful statistics for the Tractor render farm.

It connects to harvest-api which is the backend API.

It's built on the great Recharts library for graphics, uses Sass for the styling and powerful type system with TypeScript and React.

Installation

The package manager used is Yarn. Clone the repository and install the dependencies:

$ git clone https://github.com/ArtFXDev/harvest-ui
$ cd harvest-ui
$ yarn install # Install the dependencies

Usage

Environment variables

Before starting the UI, make sure the variables defined in the .env file are correct.

They are:

• REACT_APP_HARVEST_API_URL - the url of the Harvest backend API.

Available scripts

• 🚀 yarn start -> runs the Webpack development server with HMR (hot module replacement).

  You can then access the app on http://localhost:3000.

• 👷 yarn build -> builds and bundle the whole app in a build folder. It is used to host the static files on a web server like Nginx or Apache.

• 🔨 yarn tsc -> runs the TypeScript compiler and report errors. Add :watch to run an interactive process that watches file changes.

• 💅 yarn prettify -> prettify the code with Prettier. Add :write to write the modifications.

• 🚨 yarn lint -> shows ESLint warnings and errors. Add :fix to apply auto fixes.

Libraries

Here are the main libraries and packages used:

Library	Version
React	17.0.2
TypeScript	4.5.5
React router	6.2.1
Recharts	2.1.8
Sass	1.49.7

Contributing

Pull requests and issues are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT @ArtFX

harvest-ui's Issues

Make a tag repartition graph

Jobs on the farm have limit tags (https://rmanwiki.pixar.com/display/TRA/Limits+Configuration) like Houdini, Maya or V-Ray.

Task: make a tags repartition graph like this https://recharts.org/en-US/examples/SimpleRadarChart