Traffic Portal

Introduction

Traffic Portal is an AngularJS client served from a Node.js web server designed to consume the Traffic Ops API. Traffic Portal is the official replacement for the legacy Traffic Ops UI.

Software Requirements

To work on Traffic Portal you need a *nix (MacOS and Linux are most commonly used) environment that has the following installed:

Install Global NPM Packages

Grunt CLI can be installed using NPM.

#138 Install Grunt CLI
npm -g install grunt-cli

Install Compass

Compass can be installed using gem manually, or by using bundle

Tip

Bundle will automatically install the correct version of the gems.

  1. brew install ruby/apt-get install ruby/yum install ruby

  2. gem update --system

  3. At this point, you can either manually install the gems or use bundler

    1. For manually: gem install sass compass

    2. For automatically: gem install bundle && bundle install

    Note

    Bundle requires ruby versions > 2.3.0, so if you’re using a version of ruby < 2.3.0 then this will not work.

  4. Make sure that compass and sass are part of your PATH environment variable.

  5. If not, you can see where gem installs compass and sass by running:

    gem environment

  6. In there, you can see where ruby is installing all the gems. Add that path to your PATH environment variable.

    For example, it is /usr/local/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin/ for this test setup.

  7. Once you have installed compass successfully, make sure you can reach it by typing:

    compass version This should give a valid output. For example, for the test setup, the output is:

#139 Compass version output
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2020 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

Traffic Portal Project Tree Overview

  • traffic_control/traffic_portal/app/src - contains HTML, JavaScript and SCSS source files.

Installing The Traffic Portal Developer Environment

  1. Clone the Traffic Control Repository

  2. Navigate to the traffic_portal subdirectory of your cloned repository.

  3. Run npm install to install application dependencies into traffic_portal/node_modules. Only needs to be done the first time unless traffic_portal/package.json changes.

  4. Make sure that compass is installed and functioning correctly by running compass version. If compass is not available, then it can be installed following the instructions under Install Compass.

  5. Modify traffic_portal/conf/configDev.js:

    1. Valid SSL certificates and keys are needed for Traffic Portal to run. Generate these (e.g. using this SuperUser answer) and update ssl.

    2. Modify api.base_url to point to your Traffic Ops API endpoint.

  6. Run grunt to package the application into traffic_portal/app/dist, start a local HTTPS server (Express), and start a file watcher.

  7. Navigate to http(s)://localhost:[port|sslPort defined in traffic_portal/conf/configDev.js]

Note

The Traffic Portal consumes the Traffic Ops API. Modify traffic_portal/conf/configDev.js to specify the location of Traffic Ops.