Developing CCFE - linkedin/cruise-control-ui GitHub Wiki

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
  1. Install the required dependencies
cd $HOME/Opensource/cruise-control-ui/
npm install
  1. Setup your kafka cluster & cruise control

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

  1. Update the static/config.csv
cd $HOME/Opensource/cruise-control-ui/
echo "local,dev,/kafkacruisecontrol" > ./static/config.csv
  1. 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.