diff --git a/lib/CPAN/Testers/Web.pm b/lib/CPAN/Testers/Web.pm
index 0c88eb9..9fe25c7 100644
--- a/lib/CPAN/Testers/Web.pm
+++ b/lib/CPAN/Testers/Web.pm
@@ -47,11 +47,44 @@ sub startup ( $app ) {
         catdir( dist_dir( 'CPAN-Testers-Web' ), 'public' );
     unshift @{ $app->commands->namespaces }, 'CPAN::Testers::Web::Command';
 
+
     $app->moniker( 'web' );
     # This application has no configuration yet
     $app->plugin( Config => {
         default => {
             api_host => 'api.cpantesters.org',
+            dist_modules => [qw/
+                Mojolicious
+                Moose
+                Moo
+                DBIx-Class
+                App-cpanminus
+                DBI
+                Plack
+                DateTime
+                Devel-NYTProf
+                Test-Simple
+                Path-Tiny
+                Dist-Zilla
+                Scalar-List-Utils
+                App-perlbrew
+                Try-Tiny
+                libwww-perl
+                AnyEvent
+                Catalyst-Runtime
+                Data-Printer
+                Dancer
+                Template-Toolkit
+                Type-Tiny
+                Perl-Tidy
+                Dancer2
+                Perl-Critic
+                ack
+                Carton
+                Getopt-Long
+                List-MoreUtils
+                Task-Kensho
+            /]
         },
     } );
 
@@ -214,20 +247,19 @@ sub startup ( $app ) {
         $c->render( 'user/dist/settings' );
     } );
 
-    $r->get( '/dist/:dist/#version', [ format => [qw( html rss )] ], { format => 'html', version => 'latest' } )
-      ->name( 'reports.dist' )
-      ->to( 'reports#dist_reports' );
-
     $r->get( '/release/:dist', [ format => [qw( json )] ], { format => 'json' } )
       ->name( 'release.dist' )
       ->to( 'reports#dist_versions' );
 
-    $r->get( '/dist' )
-      ->name( 'dist-search' )
-      ->to( cb => sub {
-        my ( $c ) = @_;
-        $c->render( 'dist-search' );
-    } );
+    $r->get( '/dist/:dist' )->name( 'dist-view' )->to( 'dist#view', [ format => [qw(html)] ], { format => 'html', version => 'latest' } );
+    $r->get( '/dist/:dist/releases' )->name( 'dist-releases' )->to( 'dist#releases' );
+
+    $r->get( '/dist/:dist/releases/#version' )->name( 'dist-reports' )->to( 'dist#reports' );
+
+    $r->get( '/dist/:dist/#version' )->name( 'dist-view' )->to( 'dist#view', [ format => [qw(html)] ], { format => 'html', version => 'latest' } );
+    $r->get( '/dist' )->name( 'dist-search' )->to( 'dist#search' );
+    $r->post( '/dist' )->name( 'dist-recent' )->to( 'dist#recent' );
+    $r->post( '/dist/valid' )->name( 'dist-valid' )->to( 'dist#valid' );
 
     $r->get( '/author/:author', [ format => [qw( html rss json)] ] )
       ->name( 'reports.author' )
diff --git a/lib/CPAN/Testers/Web/Controller/Dist.pm b/lib/CPAN/Testers/Web/Controller/Dist.pm
new file mode 100644
index 0000000..316278d
--- /dev/null
+++ b/lib/CPAN/Testers/Web/Controller/Dist.pm
@@ -0,0 +1,156 @@
+package CPAN::Testers::Web::Controller::Dist;
+our $VERSION = '0.001';
+# ABSTRACT: Endpoints for viewing and managing distributions
+
+=head1 DESCRIPTION
+
+=head1 SEE ALSO
+
+=cut
+
+use Mojo::Base 'Mojolicious::Controller';
+use CPAN::Testers::Web::Base;
+use CPAN::Testers::Web::Controller::Legacy;
+
+=method search
+
+Landing page for /dist
+
+Lists modules configured in the config
+
+=cut
+
+sub search ( $c ) {
+	$c->render('dist/search',
+		dists => $c->config->{dist_modules}
+	);
+}
+
+=method view
+
+Render Dist view
+
+=cut
+
+sub view ( $c ) {
+    my $version = $c->param('version') || 'latest';
+    $version =~ s/\.(html|rss)$//;
+    $c->render('dist/view',
+        dist => $c->param('dist'),
+        version => $version
+    );
+}
+
+=method recent
+
+Expects a list of dists and will return the most recent for each.
+
+=cut
+
+sub recent ( $c ) {
+    my $join = $c->schema->perl5->resultset('Release')->search({
+        dist => { -in => $c->req->json->{dists} }
+    }, {
+        group_by => [qw( me.dist )],
+        select => [qw/dist/, \('MAX(version)')],
+        as => [qw/dist version/]
+    });
+
+    if (!$join->count) {
+        return $c->render( json => { dists => [] } );
+    }
+
+    my $rs = $c->schema->perl5->resultset('Release')->search({
+        -or => [
+                map +{ 'me.dist' => $_->dist, 'me.version' => $_->version }, $join->all()
+        ],
+    }, {
+        join => 'upload'
+    });
+
+    $c->render( json => {
+        dists => [
+            map +{
+                $_->get_inflated_columns,
+                released => $_->upload->released->datetime( ' ' ),
+            },
+            $rs->all
+        ]
+
+    } );
+}
+
+=method valid
+
+validate that a dist exists
+
+=cut
+
+sub valid ( $c ) {
+    my $rs = $c->schema->perl5->resultset('Release')->search({
+        dist =>  { like => $c->req->json->{dist} . '%' }
+    }, {
+        distinct => 1,
+        select => ['dist'],
+        as => ['dist'],
+        rows => 50
+    });
+
+    $c->render( json => {
+        dists => [
+            map { $_->dist }
+            $rs->all
+        ]
+    } );
+}
+
+=method releases
+
+Returns all releases for the dist
+
+=cut
+
+sub releases ( $c ) {
+    my $rs = $c->schema->perl5->resultset('Release')->search({
+        'me.dist' => $c->param('dist')
+    }, {
+        join => 'upload',
+        order_by => 'upload.released'
+    });
+
+    $c->render( json => {
+        dists => [
+            map +{
+                $_->get_inflated_columns,
+                released => $_->upload->released->datetime( ' ' ),
+            },
+            $rs->all
+        ]
+    } );
+}
+
+=method reports
+
+Returns all reports for the specific dist version
+
+=cut
+
+sub reports ( $c ) {
+    my $rs = $c->schema->perl5->resultset('Stats')->search({
+        'me.dist' => $c->param('dist'),
+        'me.version' => $c->param('version'),
+    }, {
+        order_by => { -desc => 'fulldate' }
+    });
+
+    $c->render( json => {
+        reports => [
+            map +{
+                $_->get_inflated_columns,
+            },
+            $rs->all
+        ]
+    } );
+}
+
+1;
diff --git a/share/public/css/cpantesters.css b/share/public/css/cpantesters.css
index 818efdd..85dfe52 100644
--- a/share/public/css/cpantesters.css
+++ b/share/public/css/cpantesters.css
@@ -16,3 +16,67 @@ body {
     margin-bottom: 1em;
 }
 
+
+#popular tr th:first-child {
+    min-width: 150px;
+}
+
+.loading-content {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    margin-top: 1em;
+    overflow: hidden;
+    border: 1px solid rgb(220, 224, 227);
+    background-color: rgb(240, 244, 247);
+}
+.loading-content:after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 20%;
+    top: 0;
+    animation: load 1s 1s infinite;
+    background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.5) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+}
+.loading-content.small-graph, .small-graph {
+    height: 300px;
+    width: 25%;
+}
+.loading-content.loading-content-short-height {
+    height: 110px;
+}
+.flex {
+    display: flex;
+    width: 100%;
+}
+.flex-justify {
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+}
+.bg-unknown {
+    background: #f6ddc3;
+}
+
+
+@keyframes load {
+    from {
+        left: -100px;
+    }
+    to {
+      left: 100%;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    #popular tr th:first-child {
+        min-width: auto;
+    }
+}
diff --git a/share/templates/dist/search.html.ep b/share/templates/dist/search.html.ep
new file mode 100644
index 0000000..18267a2
--- /dev/null
+++ b/share/templates/dist/search.html.ep
@@ -0,0 +1,207 @@
+
+% title 'Search Distributions';
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+
+            <h1>Search Distributions</h1>
+
+            <form id="search-form" class="form-inline">
+                <div class="form-group">
+                    <label for="search">Search:</label>
+                    <input id="search" class="form-control"
+                        placeholder="Search Distributions"
+                    >
+                </div>
+                <button class="btn btn-primary">Search</button>
+            </form>
+
+            <h2 id="search-title">Popular Distributions</h2>
+
+            <table id="popular" class="table table-striped">
+                <thead>
+                    <tr>
+                        <th>Distribution</th>
+                        <th>Last Version</th>
+                        <th>Released</th>
+                        <th class="text-center">Reports</th>
+                        <th class="text-center">Pass</th>
+                        <th class="text-center">Fail</th>
+                        <th class="text-center">Unkn</th>
+                        <th class="text-center">NA</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template>
+                        <tr>
+                            <td>
+                                <a data-id="dist" href="/dist/Statocles">Statocles</a>
+                            </td>
+                            <td data-id="version">0.066</td>
+                            <td>
+                                <time data-id="released">2015-01-11 00:12:34</time>
+                            </td>
+                            <td data-id="total" class="text-center">
+                                12
+                            </td>
+                            <td data-id="pass" class="bg-success text-center">
+                                11
+                            </td>
+                            <td data-id="fail" class="text-center">
+                                1
+                            </td>
+                            <td data-id="unknown" class="text-center">
+                                1
+                            </td>
+                            <td data-id="na" class="text-center">
+                                1
+                            </td>
+                        </tr>
+                    </template>
+
+
+                </tbody>
+            </table>
+            <script>
+                (function () {
+
+                    let Dist = function (dists) {
+                        this.title = document.querySelector('#search-title');
+                        this.search_form = document.querySelector('#search-form');
+                        this.tbody = document.querySelector('#popular tbody');
+                        this.template = this.tbody.querySelector('template');
+                        this.init(dists);
+                    };
+
+                    Dist.prototype = {
+                        active_type: 'popular',
+                        init: function (dists) {
+                            this.setupEvents();
+                            this.poll(dists, 'popular', 0);
+                        },
+                        setupEvents: function () {
+                            let self = this;
+                            let input = self.search_form.querySelector('input#search');
+                            let last_search = "";
+                            self.search_form.addEventListener('submit', function (evt) {
+                                evt.preventDefault();
+
+                                if (!input.value) {
+                                    return self.switchPopularMode();
+                                }
+
+                                if (last_search == input.value) return;
+
+                                last_search = input.value;
+
+                                self.request('/dist/valid', { dist: input.value }, function (res) {
+                                    if (!res.dists || !res.dists.length) {
+                                        alert('Distribution with the name ' + input.value + ' not found');
+                                        return;
+                                    }
+
+                                    self.switchSearchMode(input.value);
+
+                                    self.tbody.querySelectorAll('.search-dist').forEach(function (n) {
+                                        n.remove();
+                                    });
+
+                                    self.poll(res.dists, input.value, 0);
+                                });
+                            });
+
+                            input.addEventListener('keyup', function () {
+                                input.value = input.value.replace(new RegExp("([^a-zA-Z0-9\-]+)", "g"), "");
+                            });
+                        },
+                        switchSearchMode: function (type) {
+                            let self = this;
+
+                            self.active_type = type;
+
+                            self.title.innerText = 'Search results';
+
+                            self.tbody.querySelectorAll('.popular-dist').forEach(function (n) {
+                                n.classList.add('hide');;
+                            });
+
+                        },
+                        switchPopularMode: function () {
+                            let self = this;
+
+                            self.active_type = 'popular';
+
+                            self.title.innerText = 'Popular Distributions';
+
+                            self.tbody.querySelectorAll('.popular-dist').forEach(function (n) {
+                                n.classList.remove('hide');;
+                            });
+
+                            self.tbody.querySelectorAll('.search-dist').forEach(function (n) {
+                                n.remove();
+                            });
+                        },
+                        poll: function (dists, type, inc) {
+                            let self = this;
+                            if (inc < 10) inc++;
+                            let pdists = dists.splice(0, inc);
+                            self.request('/dist', { dists: pdists }, function (res) {
+                                res.dists.forEach(function (dist) {
+                                    self.render_dist(dist, type);
+                                });
+                                if (
+                                    (type == 'popular' || type == self.active_type)
+                                        && dists.length > 0
+                                ) self.poll(dists, type, inc);
+                            });
+                        },
+                        request: function (url, params, cb) {
+                            fetch(url, {
+                                method: "POST",
+                                body: JSON.stringify(params),
+                            }).then(function (res) {
+                                return res.json();
+                            }).then(function (res) {
+                                cb(res);
+                            }).catch(function (res) {
+                                 console.log(res);
+                            });
+                        },
+                        render_dist: function (dist, type) {
+                            let tr = this.template.content.cloneNode(true);
+                            let name = tr.querySelector('[data-id="dist"]');
+                            name.innerText = dist.dist;
+                            name.href = '/dist/' + dist.dist;
+                            dist.total = dist.pass + dist.fail + dist.unknown + dist.na;
+                            ['version', 'released', 'total', 'pass'].forEach(function (n) {
+                                tr.querySelector('[data-id="' + n + '"]').innerText = dist[n];
+                            });
+                            let fail = tr.querySelector('[data-id="fail"]');
+                            fail.innerText = dist.fail;
+                            fail.classList.add(dist.fail ? 'bg-danger' : 'bg-success');
+                            ['unknown', 'na'].forEach(function (n) {
+                                let x = tr.querySelector('[data-id="' + n + '"]');
+                                x.innerText = dist[n];
+                                x.classList.add(dist[n] ? 'bg-warning' : 'bg-success');
+                            });
+                            tr.firstElementChild.classList.add(type == "popular" ? "popular-dist" : "search-dist");
+                            if (type != this.active_type) {
+                                tr.firstElementChild.classList.add("hide");
+                            }
+                            this.tbody.appendChild(tr);
+                        }
+                    };
+
+                    let dists = [
+                        % for my $dist (@$dists) {
+                            "<%= $dist %>",
+                        % }
+                    ];
+
+                    new Dist(dists);
+                })();
+            </script>
+        </div>
+    </div>
+</div>
diff --git a/share/templates/dist/view.html.ep b/share/templates/dist/view.html.ep
new file mode 100644
index 0000000..0797633
--- /dev/null
+++ b/share/templates/dist/view.html.ep
@@ -0,0 +1,422 @@
+<div class="container" id="app">
+    <div style="display: flex; justify-content: space-between; align-items: flex-end;">
+        <h1>Dist - <%= $dist %></h1>
+        <p style="vertical-align: middle"><i class="fa fa-2x fa-info-circle text-info" aria-hidden="true"></i> Click a version bar to see reports for that version</p>
+    </div>
+    <form id="dist-search" class="form form-inline flex flex-justify">
+        <div class="hide">
+            <input class="form-control col-md-3" type="text" placeholder="Distribution name">
+            <button class="btn btn-primary">Search</button>
+        </div>
+        <div></div>
+        <div>
+            <select class="form-control col-md-3" name="dist_graph_size">
+                <option value="0" selected>all</option>
+                <option value="50">50</option>
+                <option value="25">25</option>
+                <option value="10">10</option>
+                <option value="5">5</option>
+            </select>
+        </div>
+    </form>
+
+    <div id="release-graph" class="loading-content"></div>
+    <form id="release-search" class="form form-inline flex">
+        <div>
+            <h4>Select a version: </h4>
+            <select class="form-control col-md-3" name="releases">
+
+            </select>
+        </div>
+    </form>
+    <div id="version-summary" class="loading-content loading-content-short-height">
+        <div class="hide">
+            <h2 class="text-center"><%= $dist %> Version <span data-id="version">2.2207</span></h2>
+        </div>
+        <div class="flex flex-justify hide">
+            <h4>Total: <span data-id="total"></span></h4>
+            <h4>Pass: <span data-id="pass"></span></h4>
+            <h4>Fail: <span data-id="fail"></span></h4>
+            <h4>NA: <span data-id="na"></span></h4>
+            <h4>Unknown: <span data-id="unknown"></span></h4>
+        </div>
+    </div>
+    <div style="margin-top:1em;" class="flex flex-justify">
+        <div></div>
+        <div>
+            <p style="vertical-align: middle"><i class="fa fa-2x fa-info-circle text-info" aria-hidden="true"></i> Click a pie piece to show reports for that OS/grade</p>
+        </div>
+    </div>
+    <div id="version-graphs" class="flex">
+        <div id="linux-graph" class="loading-content small-graph"></div>
+        <div id="darwin-graph" class="loading-content small-graph"></div>
+        <div id="mswin32-graph" class="loading-content small-graph"></div>
+        <div id="other-graph" class="loading-content small-graph"></div>
+    </div>
+    <div id="reports" class="loading-content">
+          <table class="table table-striped hide">
+                <thead>
+                    <tr>
+                        <th style="width:20px"></th>
+                        <th class="text-center">Grade</th>
+                        <th class="text-center">Perl</th>
+                        <th class="text-center">OS</th>
+                        <th class="text-center">Platform</th>
+                        <th class="text-center">Tester</th>
+                        <th class="text-center">Time</th>
+                    </tr>
+                </thead>
+                <tbody>
+
+                </tbody>
+            </table>
+
+    </div>
+</div>
+<template id="reports-row-template">
+    <tr>
+        <td class="text-center">
+            <a target="_blank" data-id="report" href="/cpan/report/70688390-3e50-11e7-bbe8-c4ce9b75e0ae" title="View full report"><i aria-hidden="true" class="fa fa-file-text-o"></i></a>
+        </td>
+        <td data-id="state" class="text-center"></td>
+        <td data-id="perl" class="text-center"></td>
+        <td data-id="osname" class="text-center"></td>
+        <td data-id="platform" class="text-center"></td>
+        <td data-id="tester" class="text-center"></td>
+        <td data-id="fulldate" class="text-center"></td>
+    </tr>
+</template>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.12/highcharts.js"></script>
+<script>
+    (function () {
+        let DistView = function (dist, version) {
+            this.dist = dist;
+            this.version = version;
+            this.dist_search = document.querySelector('#dist-search');
+            this.size = this.dist_search.querySelector('[name="dist_graph_size"]').value;
+            this.release_search = document.querySelector('#release-search select');
+            this.reports = document.querySelector('#reports');
+            this.reports_row_template = document.querySelector('#reports-row-template');
+            this.version_summary = document.querySelector('#version-summary');
+            this.release_data = [];
+            this.report_data = { };
+            this.report_graphs = { };
+            this.report_filter = { };
+            return this.init();
+        };
+
+        DistView.prototype = {
+            init: function () {
+                this.dist_search.querySelector('input').value = this.dist;
+                this.initEvents();
+                this.fetchReleases();
+            },
+            initEvents: function () {
+                let self = this;
+                self.dist_search.querySelector('[name="dist_graph_size"]').addEventListener('change', function (evt) {
+                    self.size = evt.target.value;
+                    self.drawReleaseGraph(self.release_data);
+                });
+                self.release_search.addEventListener('change', function (evt) {
+                    self.version = evt.target.value;
+                    self.setReportSummary(self.version);
+                    self.fetchReports(self.version);
+                });
+            },
+            setVersion: function (version) {
+                let self = this;
+                self.version = version;
+                self.release_search.value = version;
+                self.release_search.dispatchEvent(new Event('change'))
+            },
+            setReportSummary: function (version) {
+                let self = this;
+                let release = self.release_data.find( d => d.version == version );
+
+                self.version_summary.querySelector('[data-id="version"]').innerText = version;
+
+                release.total = release.pass + release.fail + release.na + release.unknown;
+                ['total', 'pass', 'fail', 'na', 'unknown'].forEach(function (s) {
+                    self.version_summary.querySelector('[data-id="' + s + '"]').innerText = release[s];
+                });
+
+                self.version_summary.querySelectorAll('.hide').forEach( c => c.classList.remove('hide') );
+                self.version_summary.classList.remove('loading-content');
+            },
+            fetchReleases: function () {
+                let self = this;
+                self.request('/dist/' + self.dist + '/releases', {}, function (res) {
+                    if (!res.dists.length) return;
+                    self.release_data = res.dists.reverse();
+                    self.drawReleaseGraph(self.release_data);
+                    self.drawReleaseSelector(self.release_data);
+                    if (self.version == 'latest') {
+                        self.version =  self.release_data[0].version;
+                    }
+                    self.setReportSummary(self.version);
+                    self.fetchReports(self.version);
+                });
+            },
+            clearReports: function () {
+                let self = this;
+                self.report_filter = {};
+                for ( let key in self.report_graphs ) {
+                    let g = document.querySelector('#' + key + '-graph');
+                    g.innerHTML = '';
+                    g.classList.add('loading-content');
+                }
+                self.report_graphs = {};
+                self.reports.classList.add('loading-content');
+                self.reports.querySelector('table').classList.add('hide');
+            },
+            fetchReports: function (version) {
+                let self = this;
+
+                self.clearReports();
+
+                if (self.report_data[version]) {
+                    self.drawReportGraphs(self.report_data[version]);
+                    self.drawReportTable(self.report_data[version]);
+                    return;
+                }
+
+                self.request('/dist/' + self.dist + '/releases/' + version, {}, function (res) {
+                    if (!res.reports || !res.reports.length) return;
+                    self.report_data[version] = res.reports;
+                    if (version != self.version) return;
+                    self.drawReportGraphs(self.report_data[version]);
+                    self.drawReportTable(self.report_data[version]);
+                });
+            },
+            drawReleaseSelector: function (data) {
+                let self = this;
+                self.release_search.innerHTML = '';
+                data.forEach(function (d) {
+                    let o = new Option(d.version, d.version);
+                    if (d.version == self.version) {
+                        o.selected = true;
+                    }
+                    self.release_search.appendChild(o);
+                });
+            },
+            drawReleaseGraph: function (data) {
+                let self = this;
+                let size = this.size != 0 && this.size < data.length ? this.size : data.length;
+                let series = { version: [], pass: [], fail: [], na: [], unknown: [] };
+                for ( var i = 0; i < size; i++ ) {
+                    ['version', 'pass', 'fail', 'na', 'unknown'].forEach(function (n) {
+                        series[n].push(data[i][n]);
+                    });
+                }
+
+                ['version', 'pass', 'fail', 'na', 'unknown'].forEach(function (n) {
+                    series[n] =  series[n].reverse();
+                });
+
+                let myChart = Highcharts.chart('release-graph', {
+                    chart: {
+                        type: 'column',
+                    },
+                    plotOptions: {
+                        column: {
+                            stacking: 'normal',
+                            events: {
+                                click: function (event) {
+                                    self.setVersion(event.point.category);
+                                }
+                            }
+                        }
+                    },
+                    title: {
+                        text: 'Report Summary'
+                    },
+                    xAxis: {
+                        title: { text: 'Version' },
+                        categories: series.version
+                    },
+                    yAxis: {
+                        title: {
+                            text: 'Reports by Grade'
+                        }
+                    },
+                    series: [
+                        { name: "Pass", data: series.pass, color: '#dff0d8' },
+                        { name: "Fail", data: series.fail, color: '#f2dede' },
+                        { name: "NA", data: series.na, color: '#fcf8e3' },
+                        { name: "Unknown", data: series.unknown, color: '#f6ddc3' }
+                    ]
+                });
+
+                document.querySelector('#release-graph').classList.remove('loading-content');
+            },
+            drawReportGraphs: function (data) {
+                let self = this;
+                let series = {
+                    linux: { title: "Linux", count: 0, pass: 0, fail: 0, na: 0, unknown: 0 },
+                    mswin32: { title: "Windows", count: 0, pass: 0, fail: 0, na: 0, unknown: 0 },
+                    darwin: { title: "MacOSX", count: 0, pass: 0, fail: 0, na: 0, unknown: 0 },
+                    other: { title: "Other", count: 0, pass: 0, fail: 0, na: 0, unknown: 0 },
+                };
+
+                data.forEach(function (d) {
+                    let s = series[ d.osname.toLowerCase() ] || series.other;
+                    s[ d.state ]++;
+                    s.count++;
+                });
+
+                ['linux', 'mswin32', 'darwin', 'other'].forEach(function (os) {
+
+                    self.report_graphs[os] = Highcharts.chart( os + "-graph", {
+                        defs: {
+                            osname: os
+                        },
+                        chart: {
+                            type: 'pie',
+                        },
+                        colors: ["#dff0d8", "#f2dede", "#fcf8e3", "#f6ddc3" ],
+                        plotOptions: {
+                            pie: {
+                                colorByPoint: true,
+                                allowPointSelect: true,
+                                cursor: 'pointer',
+                                dataLabels: {
+                                    enabled: false
+                                },
+                                showInLegend: true,
+                                events: {
+                                    click: function ( event ) {
+                                        if ( event.point.selected ) {
+                                            self.report_filter = {};
+                                            self.drawReportTable();
+                                            return;
+                                        }
+
+                                        // clear all other filters
+                                        for ( var name in self.report_graphs ) {
+                                            var points = self.report_graphs[ name ].getSelectedPoints();
+                                            for ( var j = 0; j < points.length; j++ ) {
+                                                points[j].select( false, false );
+                                            }
+                                        }
+
+                                        // set this filter
+                                        self.report_filter = {
+                                            osname: event.point.osname,
+                                            state: event.point.grade,
+                                        };
+
+
+                                        self.drawReportTable();
+                                    }
+                                }
+                            }
+                        },
+                        legend: {
+                            labelFormatter: function (l) {
+                                return this.name + ' (' + this.y + ')';
+                            }
+                        },
+                        title: {
+                            text: series[os]['title'] + ' (' + series[os].count + ')'
+                        },
+                        series: [{
+                            name: 'Reports',
+                            data: [
+                                { name: 'Pass',  y: series[os].pass, grade: "pass", osname: os },
+                                { name: 'Fail', y: series[os].fail, grade: "fail", osname: os },
+                                { name: 'NA',  y: series[os].na, grade: "na", osname: os },
+                                { name: 'Unknown', y: series[os].unknown, grade: "unknown", osname: os }
+                            ]
+                        }]
+
+                    });
+
+                    document.querySelector('#' + os + '-graph').classList.remove('loading-content');
+                });
+            },
+            drawReportTable: function (data) {
+                let self = this;
+                if (!data) data = self.report_data[self.version];
+                data = self.filterReportTable(data);
+                self.reports.classList.remove('loading-content');
+                self.reports.querySelector('table').classList.remove('hide');
+                let tbody = self.reports.querySelector('tbody');
+                tbody.innerHTML = '';
+                data.forEach(function (d) {
+                    let tr = self.reports_row_template.content.cloneNode(true);
+                    let state = tr.querySelector('[data-id="state"]');
+                    state.innerText = d.state;
+                    state.classList.add(
+                        d.state == 'pass'
+                            ? 'bg-success'
+                            : d.state == 'fail'
+                                ? 'bg-danger'
+                                : d.state == 'na'
+                                ? 'bg-warning'
+                                : 'bg-unknown'
+                    );
+
+                    tr.querySelector('[data-id="report"]').href = 'https://www.cpantesters.org/cpan/report/' + d.guid;
+                    d.fulldate = self.fixWeirdDate(d.fulldate);
+
+                    ['state', 'perl', 'osname', 'platform', 'tester', 'fulldate'].forEach(function (k) {
+                        tr.querySelector('[data-id="' + k + '"]').innerText = d[k];
+                    });
+
+                    tbody.appendChild(tr);
+                });
+            },
+            filterReportTable: function (data) {
+                let filter = this.report_filter;
+                if ( !filter.osname ) {
+                    return data;
+                }
+                return data.filter(function (d) {
+
+                    if (filter.osname == 'other') {
+                         return ( !d.osname.toLowerCase().match(/^(linux|darwin|mswin32)$/) && filter.state == d.state ) ? 1 : 0;
+
+                    }
+
+                    return  (
+                        filter.osname == d.osname.toLowerCase() && filter.state == d.state
+                    ) ? 1 : 0
+                });
+            },
+            fixWeirdDate: function (data) {
+                let regex = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})/g;
+                return data.replace(regex, function (match, y, m, d, h, M) {
+                    return y + '-' + m + '-' + d + ' ' + h + ':' + M;
+                });
+            },
+            queryParams: function (url, params) {
+                let str = "";
+                for (param in params) {
+                    if (str) str += "&";
+                    str += encodeURI(param + "=" + params[param]);
+                }
+                return str ? ( url + "?" + str ) : url;
+            },
+            request: function (url, params, cb) {
+                url = this.queryParams(url, params);
+                fetch(url, {
+                    method: "GET",
+                }).then(function (res) {
+                    return res.json();
+                }).then(function (res) {
+                    cb(res);
+                }).catch(function (res) {
+                     console.log(res);
+                });
+            },
+        };
+
+        let dist = "<%= $dist %>";
+        let version = "<%= $version %>"
+        window.addEventListener('DOMContentLoaded', function () {
+            new DistView(dist, version);
+        });
+    })();
+</script>