Merge pull request #405 from prometheus/grobie/downloads

Add download section

.gitignore

@@ -5,6 +5,7 @@ output/
 
 # Temporary file directory
 tmp/
+downloads/
 
 # Crash Log
 crash.log

Makefile

-compile:
-	rm -rf output
+DOWNLOADS := prometheus alertmanager blackbox_exporter haproxy_exporter mysqld_exporter node_exporter pushgateway statsd_exporter
+
+clean:
+	rm -rf output downloads
+
+compile: clean downloads
 	bundle exec nanoc
 
 deploy: github_pages_export github_pages_push
 
+downloads: $(DOWNLOADS:%=downloads/%/repo.json) $(DOWNLOADS:%=downloads/%/releases.json)
+
+downloads/%/repo.json:
+	mkdir -p $(dir $@)
+	curl -sf -H 'Accept: application/vnd.github.v3+json' https://api.github.com/repos/prometheus/$* > $@
+
+downloads/%/releases.json:
+	mkdir -p $(dir $@)
+	curl -sf -H 'Accept: application/vnd.github.v3+json' https://api.github.com/repos/prometheus/$*/releases > $@
+
 github_pages_export: compile
 	cd output && \
 	echo prometheus.io > CNAME && \

content/community.html

 ---
 title: Community
 ---
-<div class="col-md-8 col-md-offset-2 doc-content">
+<div class="row">
+  <div class="col-md-12 doc-content">
     <h1>Community</h1>
     <p>
       Prometheus is developed in the open. Here are some of the channels we use
@@ -56,4 +57,5 @@ title: Community
     <p>
       The Prometheus logo was contributed by <a href="http://www.makingstuffmove.com/">Robin Greenwood</a>.
     </p>
+  </div>
 </div>

content/css/docs.css

@@ -76,7 +76,8 @@ body {
   background-color: rgba(0,0,0,0.15);
   color: #fff;
   padding: 20px 25px 20px 25px;
-  margin-top: 15px;
+  margin: 15px 10px 0 10px;
+  text-transform: uppercase;
 }
 
 .jumbotron a.btn:hover {
@@ -188,6 +189,24 @@ footer {
   color: #333;
 }
 
+/* Downloads related styles. */
+.download h2 {
+  margin-top: 2em;
+}
+
+.download-selection {
+  clear: both;
+}
+
+.download-selection .btn-group {
+  padding-right: 1em;
+}
+
+.downloads .checksum {
+  color: #aaa;
+  font-style: italic;
+}
+
 /* Docs-related styles. */
 .side-nav-col {
   z-index: 100;

content/docs/introduction/getting_started.md

@@ -13,8 +13,8 @@ series data.
 
 ## Downloading and running Prometheus
 
-[Download the latest release](https://github.com/prometheus/prometheus/releases)
-of Prometheus for your platform, then extract and run it:
+[Download the latest release](/download) of Prometheus for your platform, then
+extract and run it:
 
 ```
 tar xvfz prometheus-*.tar.gz

content/docs/introduction/install.md

@@ -7,35 +7,28 @@ sort_rank: 2
 
 ## Using pre-compiled binaries
 
-We provide precompiled binaries for released versions for most Prometheus
-components. These may be found under the "Releases" tab of the respective
-GitHub repositories. For example, for the main Prometheus server, binary
-releases are available at
-[https://github.com/prometheus/prometheus/releases](https://github.com/prometheus/prometheus/releases).
-
-Debian and RPM packages are being worked on.
+We provide precompiled binaries for most official Prometheus components.
+Check out the [download section](/download) for a list of all available
+versions.
 
 ## From source
 
-For building Prometheus from source, see the relevant [`README.md`
-section](https://github.com/prometheus/prometheus/blob/master/README.md#use-make).
+For building Prometheus components from source, see the `Makefile` targets in
+the respective repository.
 
-Note that this documentation (as published on
-[prometheus.io](https://prometheus.io)) refers to the latest production
-release. The head of the
-[prometheus/docs](https://github.com/prometheus/docs) GitHub
-repository refers to the (possibly not yet released) head of the
-[prometheus/prometheus](https://github.com/prometheus/prometheus) (and
-other) repositories.
+NOTE: **Note:** The documentation on this website refers to the latest stable
+release (excluding pre-releases). The branch
+[next-release](https://github.com/prometheus/docs/compare/next-release) refers
+to unreleased changes that are in master branches of source repos.
 
 ## Using Docker
 
 All Prometheus services are available as Docker images under the
 [prom](https://hub.docker.com/u/prom/) organization.
 
-Running Prometheus on Docker is as simple as
- `docker run -p 9090:9090 prom/prometheus`. This starts Prometheus with
-a sample configuration and exposes it on port 9090.
+Running Prometheus on Docker is as simple as `docker run -p 9090:9090
+prom/prometheus`. This starts Prometheus with a sample configuration and
+exposes it on port 9090.
 
 The Prometheus image uses a volume to store the actual metrics. For
 production deployments it is highly recommended to use the

content/download.html

+---
+title: Download
+---
+<div class="row">
+  <div class="col-md-12 doc-content download">
+    <h1>Download</h1>
+
+    <div class="toc toc-right">
+      <ul>
+      <% Downloads.repositories.each do |repo| %>
+        <li><a href="#<%= repo.name %>"><%= repo.name %></a></li>
+      <% end %>
+      </ul>
+    </div>
+
+    <p>
+      We provide precompiled binaries and Docker images for most officially
+      maintained Prometheus components. If a component isn't listed here, check
+      the respective repository on Github for further instructions.
+    </p>
+    <p>
+      There is also a constantly growing number of independently maintained
+      exporters listed at <a href="/docs/instrumenting/exporters/">Exporters
+      and third-party integrations</a>.
+    </p>
+    <p>
+      After downloading a binary release suitable for your system, please follow
+      the <a href="/docs/introduction/getting_started/">installation instructions</a>.
+    </p>
+
+    <div class="alert alert-info" role="alert">
+      <strong>Work in progress!</strong>
+      We will provide more precompiled binary versions as well as checksums soon.
+    </div>
+
+    <div class="panel panel-default download-selection">
+      <div class="panel-body">
+        Operating system <%= dropdown(:os, Downloads.operating_systems) %>
+        Architecture <%= dropdown(:arch, Downloads.architectures) %>
+      </div>
+    </div>
+
+    <% Downloads.repositories.each do |repository| %>
+    <h2 id="<%= repository.name %>"><%= repository.name %></h2>
+    <p><%= repository.description %> <a href="<%= repository.url %>"><i class="fa fa-github"></i> <%= repository.full_name %></a></p>
+
+    <table class="table table-bordered downloads">
+    <% repository.releases.each do |release| %>
+      <thead>
+        <tr>
+          <th colspan="5">
+            <%= release.name %>
+            <%= %(<span class="label label-primary">Pre-release</span>) if release.prerelease %>
+            <small><a href="<%= release.url %>">Release notes</a></small>
+          </th>
+        </tr>
+        <tr class="first">
+          <th>File name</th>
+          <th>OS</th>
+          <th>Arch</th>
+          <th>Size</th>
+          <th>SHA256 Checksum</th>
+        </tr>
+      </thead>
+      <tbody>
+      <% release.assets.each do |asset| %>
+        <tr data-os="<%= asset.os %>" data-arch="<%= asset.arch %>">
+          <td class="filename"><a class="download" href="<%= asset.url %>"><%= asset.name %></a></td>
+          <td><%= asset.os %></td>
+          <td><%= asset.arch %></td>
+          <td><%= format_bytes asset.size %></td>
+          <td class="checksum">not available yet</td>
+        </tr>
+      <% end %>
+      </tbody>
+    <% end %>
+    </table>
+    <% end %>
+  </div>
+</div>

content/index.html

@@ -6,7 +6,8 @@ layout: jumbotron
     <h1>From metrics to insight</h1>
     <p class="subtitle">Power your metrics and alerting with a leading<br>open-source monitoring solution.</p>
     <p>
-      <a class="btn btn-default btn-lg" href="/docs/introduction/getting_started/" role="button">GET STARTED</a>
+      <a class="btn btn-default btn-lg" href="/docs/introduction/getting_started/" role="button">Get Started</a>
+      <a class="btn btn-default btn-lg" href="/download" role="button">Download</a>
     </p>
   </div>
 </div>

layouts/default.html

@@ -2,6 +2,7 @@
 
 <div class="container">
   <%= yield %>
+  <%= render 'container_footer' %>
 </div>
 
 <%= render 'footer' %>

layouts/footer.html

     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
     <script src="/assets/bootstrap-3.3.1/js/bootstrap.min.js"></script>
+    <script src="/assets/docs.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="/assets/ie10-viewport-bug-workaround.js"></script>
     <!-- Google Analytics -->

layouts/header.html

@@ -47,8 +47,6 @@
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Lato:300,300italic,400' rel='stylesheet' type='text/css'>
 
-    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
-    <script src="/assets/docs.js"></script>
   </head>
 
   <body>
@@ -68,9 +66,11 @@
         <div class="collapse navbar-collapse" id="navbar">
           <ul class="nav navbar-nav navbar-right main-nav">
             <li><a href="/docs/introduction/overview/">Docs</a></li>
+            <li><a href="/download/">Download</a></li>
             <li><a href="/community/">Community</a></li>
             <li><a href="/blog/">Blog</a></li>
-            <li><a href="https://github.com/prometheus"><i class="fa fa-github"></i> Github</a></li>
+            <li><a href="https://github.com/prometheus"><i class="fa fa-github"></i></a></li>
+            <li><a href="https://twitter.com/PrometheusIO"><i class="fa fa-twitter"></i></a></li>
           </ul>
         </div>
       </div>

lib/default.rb

@@ -23,5 +23,22 @@ module BlogHelper
     return content
   end
 end
-
 include BlogHelper
+
+module DownloadHelper
+  def format_bytes(bytes)
+    '%.2f MiB' % (bytes.to_f / 1024 / 1024)
+  end
+
+  def dropdown(name, items)
+    caption = %(<span class="caption">all</span> <span class="caret"></span>)
+    button = %(<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">#{caption}</button>)
+    default = %(<li><a href="#">all</a></li><li><a href="#">popular</a></li><li role="separator" class="divider"></li>)
+    list = %(<ul class="dropdown-menu">#{default} #{items.map { |i| %(<li><a href="#">#{i}</a></li>) }.join('') }</ul>)
+
+    %(<div class="btn-group #{name}">#{button} #{list}</div>)
+  end
+end
+include DownloadHelper
+
+

lib/helpers/download.rb

+require 'json'
+
+module Downloads
+  # repositories returns a list of all repositories with releases.
+  def self.repositories
+    @repositories ||= begin
+      repos = Dir.glob('downloads/*').map { |dir| Repository.new(dir) }
+      repos.sort_by { |r| r.name == 'prometheus' ? '0' : r.name }
+    end
+  end
+
+  # operating_systems returns a list of all operating systems downloads can be
+  # provided for.
+  def self.operating_systems
+    repositories.inject([]) do |list, repo|
+      list += repo.releases.map { |r| r.assets.map(&:os) }.flatten
+    end.uniq.sort
+  end
+
+  # architectures returns a list of all architectures downloads can be
+  # provided for.
+  def self.architectures
+    repositories.inject([]) do |list, repo|
+      list += repo.releases.map { |r| r.assets.map(&:arch) }.flatten
+    end.uniq.sort
+  end
+
+  class Repository
+    def initialize(dir)
+      @repo = JSON.parse(File.read(File.join(dir, 'repo.json')))
+      @releases = JSON.parse(File.read(File.join(dir, 'releases.json')))
+    end
+
+    def name
+      @repo['name']
+    end
+
+    def full_name
+      @repo['full_name']
+    end
+
+    def description
+      @repo['description']
+    end
+
+    def url
+      @repo['html_url']
+    end
+
+    def releases
+      releases = []
+      @releases.each do |r|
+        if r['prerelease']
+          releases << r if releases.empty?
+        else
+          releases << r
+          break
+        end
+      end
+      releases.map { |r| Release.new(r) }
+    end
+  end
+
+  class Release
+    def initialize(data)
+      @data = data
+    end
+
+    def name
+      @data['name']
+    end
+
+    def url
+      @data['html_url']
+    end
+
+    def prerelease
+      @data['prerelease']
+    end
+
+    def assets
+      @data['assets'].map { |d| Asset.new(d) }
+    end
+  end
+
+  class Asset
+    def initialize(data)
+      @data = data
+    end
+
+    def name
+      @data['name']
+    end
+
+    def url
+      @data['url']
+    end
+
+    def kind
+      'Binary'
+    end
+
+    # TODO(ts): validate
+    def os
+      name.split('.')[3].split('-').first
+    end
+
+    # TODO(ts): validate
+    def arch
+      name.split('.')[3].split('-').last
+    end
+
+    def size
+      @data['size']
+    end
+  end
+end

static/docs.js

@@ -19,4 +19,38 @@ $(document).ready(function() {
     var link = $('<a href="#">').text($(this).text()).click(navToggle);
     $(this).replaceWith(link);
   });
+
+  var selected = function(value, want, popular) {
+    switch(want) {
+    case 'all':
+      return true;
+    case 'popular':
+      return popular.indexOf(value) > -1;
+    default:
+      return value === want;
+    }
+  }
+  var selectDownloads = function() {
+    var os = $('.download-selection .os .caption').text();
+    var arch = $('.download-selection .arch .caption').text();
+
+    $('.downloads tbody tr').each(function() {
+      if (selected($(this).data('os').toString(), os, ['darwin', 'linux'])
+          && selected($(this).data('arch').toString(), arch, ['386', 'amd64'])) {
+        $(this).show();
+      } else {
+        $(this).hide();
+      }
+    });
+  };
+
+  $('.download-selection button .caption').text('popular');
+  selectDownloads();
+
+  $('.download-selection a').on('click', function() {
+    event.preventDefault();
+
+    $(this).parents('.btn-group').find('button .caption').text($(this).text());
+    selectDownloads();
+  });
 });