| <!DOCTYPE html> |
| <!--[if IE 8]> |
| <html class="no-js lt-ie9" lang="en"> <![endif]--> |
| <!--[if gt IE 8]><!--> |
| <html class="no-js" lang="en"> <!--<![endif]--> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Traffic Portal — Traffic Control 1.7 documentation </title> |
| <link rel="shortcut icon" href="../_static/favicon.ico"/> |
| <link rel="stylesheet" href="../_static/css/theme.css" type="text/css"/> |
| <link rel="stylesheet" href="../_static/theme_overrides.css" type="text/css"/> |
| <link rel="top" title="Traffic Control 1.7 documentation" href="../index.html"/> |
| <link rel="up" title="Developer’s Guide" href="index.html"/> |
| <link rel="next" title="Traffic Router" href="traffic_router.html"/> |
| <link rel="prev" title="Snapshot CRConfig" href="traffic_ops_api/v12/topology.html"/> |
| <script src="_static/js/modernizr.min.js"></script> |
| </head> |
| <body class="wy-body-for-nav" role="document"> |
| <div class="wy-grid-for-nav"> |
| <nav data-toggle="wy-nav-shift" class="wy-nav-side"> |
| <div class="wy-side-nav-search"> |
| <a href="/" class="icon icon-home"> Traffic Control |
| <img src="../_static/tc_logo.png" class="logo"/> |
| </a> |
| <div role="search"> |
| <form id="rtd-search-form" class="wy-form" action="../search.html" method="get"> |
| <input type="text" name="q" placeholder="Search docs"/> |
| <input type="hidden" name="check_keywords" value="yes"/> |
| <input type="hidden" name="area" value="default"/> |
| </form> |
| </div> |
| </div> |
| <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation"> |
| <ul> |
| <li class="toctree-l1"><a class="reference internal" href="../basics/index.html">CDN Basics</a> |
| <ul> |
| <li class="toctree-l2"><a class="reference internal" |
| href="../basics/content_delivery_networks.html">Content Delivery |
| Networks</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../basics/http_11.html">HTTP 1.1</a> |
| </li> |
| <li class="toctree-l2"><a class="reference internal" href="../basics/caching_proxies.html">Caching |
| Proxies</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../basics/cache_revalidation.html">Cache |
| Control Headers and Revalidation</a></li> |
| </ul> |
| </li> |
| </ul> |
| <ul> |
| <li class="toctree-l1"><a class="reference internal" href="../overview/index.html">Traffic Control |
| Overview</a> |
| <ul> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/introduction.html">Introduction</a> |
| </li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_ops.html">Traffic |
| Ops</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_portal.html">Traffic |
| Portal</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_router.html">Traffic |
| Router</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_monitor.html">Traffic |
| Monitor</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_stats.html">Traffic |
| Stats</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_server.html">Traffic |
| Server</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../overview/traffic_vault.html">Traffic |
| Vault</a></li> |
| </ul> |
| </li> |
| </ul> |
| <ul> |
| <li class="toctree-l1"><a class="reference internal" href="../admin/index.html">Administrator’s |
| Guide</a> |
| <ul> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_ops_install.html">Installing |
| Traffic Ops</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_ops_config.html">Configuring |
| Traffic Ops</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_ops_using.html">Using |
| Traffic Ops</a></li> |
| <li class="toctree-l2"><a class="reference internal" |
| href="../admin/traffic_ops_extensions.html">Managing Traffic Ops |
| Extensions</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_portal.html">Traffic |
| Portal Administration</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_monitor.html">Traffic |
| Monitor Administration</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_router.html">Traffic |
| Router Administration</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_stats.html">Traffic |
| Stats Administration</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_server.html">Traffic |
| Server Administration</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/traffic_vault.html">Traffic |
| Vault Administration</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../admin/quick_howto/index.html">Quick |
| How To Guides</a></li> |
| </ul> |
| </li> |
| </ul> |
| <ul class="current"> |
| <li class="toctree-l1 current"><a class="reference internal" href="index.html">Developer’s |
| Guide</a> |
| <ul class="current"> |
| <li class="toctree-l2"><a class="reference internal" href="traffic_ops.html">Traffic Ops</a> |
| </li> |
| <li class="toctree-l2 current"><a class="current reference internal" href="#">Traffic Portal</a> |
| </li> |
| <li class="toctree-l2"><a class="reference internal" href="traffic_router.html">Traffic |
| Router</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="traffic_monitor.html">Traffic |
| Monitor</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="traffic_stats.html">Traffic Stats</a> |
| </li> |
| <li class="toctree-l2"><a class="reference internal" href="traffic_server.html">Traffic |
| Server</a></li> |
| </ul> |
| </li> |
| </ul> |
| <ul> |
| <li class="toctree-l1"><a class="reference internal" href="../faq/index.html">FAQ</a> |
| <ul> |
| <li class="toctree-l2"><a class="reference internal" href="../faq/general.html">General</a></li> |
| <li class="toctree-l2"><a class="reference internal" |
| href="../faq/development.html">Development</a></li> |
| <li class="toctree-l2"><a class="reference internal" href="../faq/administration.html">Running a |
| Traffic Control CDN</a></li> |
| </ul> |
| </li> |
| </ul> |
| <ul> |
| <li class="toctree-l1"><a class="reference internal" href="../glossary.html">Glossary</a></li> |
| </ul> |
| </div> |
| </nav> |
| <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"> |
| <nav class="wy-nav-top" role="navigation" aria-label="top navigation"> |
| <i data-toggle="wy-nav-top" class="fa fa-bars"></i> |
| <a href="../index.html">Traffic Control</a> |
| </nav> |
| <div class="wy-nav-content"> |
| <div class="rst-content"> |
| <div role="navigation" aria-label="breadcrumbs navigation"> |
| <ul class="wy-breadcrumbs"> |
| <li><a href="../index.html">Traffic Control 1.7</a> »</li> |
| <li><a href="index.html">Developer’s Guide</a> »</li> |
| <li>Traffic Portal</li> |
| <li class="wy-breadcrumbs-aside"> |
| <a href="../_sources/development/traffic_portal.txt" rel="nofollow"> View page source</a> |
| </li> |
| </ul> |
| <hr/> |
| </div> |
| <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation"> |
| <a href="traffic_router.html" class="btn btn-neutral float-right" title="Traffic Router">Next <span |
| class="fa fa-arrow-circle-right"></span></a> |
| <a href="traffic_ops_api/v12/topology.html" class="btn btn-neutral" title="Snapshot CRConfig"><span |
| class="fa fa-arrow-circle-left"></span> Previous</a> |
| </div> |
| <div role="main" class="document"> |
| <div class="section" id="traffic-portal"> |
| <h1>Traffic Portal<a class="headerlink" href="#traffic-portal" |
| title="Permalink to this headline">¶</a></h1> |
| <div class="section" id="introduction"> |
| <h2>Introduction<a class="headerlink" href="#introduction" |
| title="Permalink to this headline">¶</a></h2> |
| <p>Traffic Portal is an <a class="reference external" href="https://angularjs.org/">AngularJS |
| 1.x</a> client served from a <a class="reference external" |
| href="https://nodejs.org/en/">Node.js</a> web server |
| designed to consume the Traffic Ops 1.x API. Traffic Portal provides a set of |
| functionality restricted to the delivery service(s) of the authenticated user. |
| Functionality primarily includes a set of charts / graphs designed to provide insight |
| into the performance of a user’s delivery service(s).</p> |
| </div> |
| <div class="section" id="software-requirements"> |
| <h2>Software Requirements<a class="headerlink" href="#software-requirements" |
| title="Permalink to this headline">¶</a></h2> |
| <p>To work on Traffic Portal you need a *nix (MacOS and Linux are most commonly used) |
| environment that has the following installed:</p> |
| <blockquote> |
| <div> |
| <ul class="simple"> |
| <li><a class="reference external" href="https://www.ruby-lang.org/en/">Ruby |
| 2.0.x or above</a></li> |
| <li><a class="reference external" href="http://compass-style.org/">Compass 1.0.x |
| or above</a></li> |
| <li><a class="reference external" href="https://nodejs.org/en/">Node.js 6.0.x or |
| above</a></li> |
| <li><a class="reference external" href="https://bower.io/">Bower 1.7.9 or |
| above</a></li> |
| <li><a class="reference external" href="https://github.com/gruntjs/grunt-cli">Grunt |
| CLI 1.2.0 or above</a></li> |
| <li>Access to a working instance of Traffic Ops</li> |
| </ul> |
| </div> |
| </blockquote> |
| </div> |
| <div class="section" id="traffic-portal-project-tree-overview"> |
| <h2>Traffic Portal Project Tree Overview<a class="headerlink" |
| href="#traffic-portal-project-tree-overview" |
| title="Permalink to this headline">¶</a></h2> |
| <blockquote> |
| <div> |
| <ul class="simple"> |
| <li><strong>traffic_control/traffic_portal/app/src</strong> - contains HTML, |
| JavaScript and Sass source files. |
| </li> |
| </ul> |
| </div> |
| </blockquote> |
| </div> |
| <div class="section" id="installing-the-traffic-portal-developer-environment"> |
| <h2>Installing The Traffic Portal Developer Environment<a class="headerlink" |
| href="#installing-the-traffic-portal-developer-environment" |
| title="Permalink to this headline">¶</a> |
| </h2> |
| <blockquote> |
| <div> |
| <ul class="simple"> |
| <li>Clone the traffic_control repository</li> |
| <li>Navigate to the traffic_control/traffic_portal of your cloned repository. |
| </li> |
| <li>Run <code class="docutils literal"><span class="pre">npm</span> <span |
| class="pre">install</span></code> to install application dependencies. |
| Only needs to be done the first time unless traffic_portal/package.json |
| changes. |
| </li> |
| <li>Run <code class="docutils literal"><span class="pre">bower</span> <span |
| class="pre">install</span></code> to install client-side dependencies. |
| Only needs to be done the first time unless traffic_portal/bower.json |
| changes. |
| </li> |
| <li>Run <code class="docutils literal"><span class="pre">grunt</span></code> to |
| package the application into traffic_portal/app/dist, start a local http |
| server (Express), and start a file watcher. |
| </li> |
| <li>Navigate to <a class="reference external" href="http://localhost:8080">http://localhost:8080</a> |
| </li> |
| </ul> |
| </div> |
| </blockquote> |
| </div> |
| <div class="section" id="notes"> |
| <h2>Notes<a class="headerlink" href="#notes" title="Permalink to this headline">¶</a></h2> |
| <ul class="simple"> |
| <li>The Traffic Portal consumes the Traffic Ops API. By default, Traffic Portal assumes |
| Traffic Ops is running on <a class="reference external" |
| href="http://localhost:3000">http://localhost:3000</a>. |
| Temporarily modify conf/config.js if you need to change the location of Traffic Ops. |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <footer> |
| <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation"> |
| <a href="traffic_router.html" class="btn btn-neutral float-right" title="Traffic Router">Next |
| <span class="fa fa-arrow-circle-right"></span></a> |
| <a href="traffic_ops_api/v12/topology.html" class="btn btn-neutral" |
| title="Snapshot CRConfig"><span class="fa fa-arrow-circle-left"></span> Previous</a> |
| </div> |
| <hr/> |
| <div role="contentinfo"> |
| <p> |
| </p> |
| </div> |
| Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a |
| href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a |
| href="https://readthedocs.org">Read the Docs</a>. |
| </footer> |
| </div> |
| </div> |
| </section> |
| </div> |
| <script type="text/javascript"> |
| var DOCUMENTATION_OPTIONS = { |
| URL_ROOT: '../', |
| VERSION: '1.7', |
| COLLAPSE_INDEX: false, |
| FILE_SUFFIX: '.html', |
| HAS_SOURCE: true |
| }; |
| </script> |
| <script type="text/javascript" src="../_static/jquery.js"></script> |
| <script type="text/javascript" src="../_static/underscore.js"></script> |
| <script type="text/javascript" src="../_static/doctools.js"></script> |
| <script type="text/javascript" src="../_static/js/theme.js"></script> |
| <script type="text/javascript"> |
| jQuery(function () { |
| SphinxRtdTheme.StickyNav.enable(); |
| }); |
| </script> |
| </body> |
| </html> |
