Developing CCFE

This document is helpful for users who want to contribute to CCFE.

CCFE is written in Javascript using Vue.js Framework.

Files

Lets take a look at the important files and directories in the codebase

• build/* - Files required to build project and also run hot-reload server
• config/* - Webpack configuration file
• dist/* - Final build files will be placed under this directory
• images/* - UI Screenshots
• static/* - All static files which go as part of final build output
• src/App.vue - Main vue component which leverages url routing to render the features
• src/main.js - Main code which includes all necessary javascript libraries
• src/goals.js - Hand created goals & their definitions from Cruise Control Wiki (need to update when CC changes any of them)
• src/router/index.js - URL Routing and their component mapping is defined here
• src/store/index.js - Global shared state using vuex
• src/components/*.vue - All the Components required to render the views.

Please make code contributions as per this document.

Running locally

You should have the latest stable node.js & npm (v9.x or higher)

1. Checkout the source code

mkdir $HOME/Opensource
cd $HOME/Opensource
git clone https://github.com/linkedin/cruise-control-ui

2. Install the required dependencies

cd $HOME/Opensource/cruise-control-ui/
npm install

3. Setup your kafka cluster & cruise control

Assuming Cruise control is running on ip 0.0.0.0 and port 9090 on the same host.

4. Update the static/config.csv

cd $HOME/Opensource/cruise-control-ui/
echo "local,dev,/kafkacruisecontrol" > ./static/config.csv

5. Start the hot-reload server

npm run dev

This will start cruise control ui (CCFE) on your browser at http://localhost:8090/

From this point, any changes you make to the *.vue files or any other .js files will automatically show on your frontend.