pghero 1.4.0 → 1.4.1

data/app/views/layouts/pg_hero/application.html.erb

@@ -4,390 +4,8 @@
     <title><%= [@databases.size > 1 ? @current_database.name : "PgHero", @title].compact.join(" / ") %></title>
 
     <meta charset="utf-8" />
-
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        background-color: #eee;
-      }
-
-      body, textarea {
-        font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-        font-size: 14px;
-        line-height: 1.4;
-        color: #333;
-      }
-
-      a, a:visited, a:active {
-        color: #428bca;
-        text-decoration: none;
-      }
-
-      a:hover {
-        text-decoration: underline;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        border-spacing: 0;
-        margin-bottom: 20px;
-      }
-
-      th {
-        text-align: left;
-        border-bottom: solid 2px #ddd;
-      }
-
-      h1 {
-        margin-top: 0;
-        font-size: 20px;
-        font-weight: bold;
-      }
-
-      h1, p {
-        margin-bottom: 20px;
-      }
-
-      ul {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-      }
-
-      table td, table th {
-        padding: 8px;
-      }
-
-      td {
-        border-top: solid 1px #ddd;
-      }
-
-      pre {
-        background-color: #eee;
-        padding: 10px;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-
-      textarea {
-        width: 100%;
-        height: 100px;
-        border: solid 1px #ddd;
-        padding: 10px;
-      }
-
-      hr {
-        border: none;
-        height: 0;
-        border-top: solid 1px #ddd;
-        margin-bottom: 15px;
-      }
-
-      .container {
-        max-width: 1000px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .text-muted {
-        color: #999;
-      }
-
-      .text-right {
-        text-align: right;
-      }
-
-      .percent {
-        color: #999;
-        font-size: 12px;
-        margin-left: 6px;
-      }
-
-      .tiny {
-        font-size: 12px;
-        margin-left: 6px;
-      }
-
-      #status, .content, .alert {
-        margin-bottom: 20px;
-      }
-
-      .content {
-        padding: 20px 20px 1px 20px;
-        background-color: #fff;
-      }
-
-      .queries td {
-        vertical-align: middle;
-      }
-
-      #status div {
-        margin-bottom: 0;
-      }
-
-      #slider-container {
-        padding: 6px 140px 20px 140px;
-      }
-
-      .queries-table th a {
-        color: inherit;
-      }
-
-      #slider {
-        margin-bottom: 20px;
-      }
-
-      #range-start {
-        min-height: 20px;
-      }
-
-      #range-end {
-        float: right;
-      }
-
-      .queries-info {
-        text-align: center;
-        margin-top: 40px;
-      }
-
-      /* nav */
-
-      .nav a {
-        color: #333;
-        text-decoration: none;
-        display: block;
-        padding: 12px 20px;
-      }
-
-      .nav li.active a {
-        background-color: #ddd;
-      }
-
-      .nav a:hover {
-        background-color: #ddd;
-      }
-
-      .nav li.active-database a {
-        color: #999;
-      }
-
-      .nav-header {
-        font-weight: bold;
-        color: #333;
-        padding: 12px 20px 12px 0;
-        margin: 0;
-      }
-
-      /* buttons */
-
-      .btn {
-        display: inline-block;
-        border: none;
-        color: #fff;
-        padding: 12px 20px;
-        font-size: inherit;
-        font-family: inherit;
-        line-height: 1;
-        cursor: pointer;
-        outline: none;
-        margin: 0;
-        -webkit-appearance: none;
-        -webkit-border-radius: 0;
-      }
-
-      .btn-danger {
-        background-color: #d9534f;
-      }
-
-      .btn-info {
-        background-color: #5bc0de;
-      }
-
-      /* alerts */
-
-      .alert {
-        padding: 12px 20px;
-        color: #fff;
-      }
-
-      .alert-info {
-        background-color: #5bc0de;
-      }
-
-      .alert-success {
-        background-color: #5cb85c;
-      }
-
-      .alert-warning {
-        background-color: #f0ad4e;
-      }
-
-      .alert-danger {
-        background-color: #d9534f;
-      }
-
-      .alert a {
-        color: #fff;
-        text-decoration: none;
-      }
-
-      .button_to, .button_to div {
-        display: inline;
-      }
-
-      /*
-        Simple Grid
-        Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
-        Project Page - http://thisisdallas.github.com/Simple-Grid/
-        Author - Dallas Bass
-        Site - dallasbass.com
-      */
-
-      *, *:after, *:before {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-      }
-
-      body {
-        margin: 0px;
-      }
-
-      [class*='col-'] {
-        float: left;
-        padding-right: 20px;
-      }
-
-      [class*='col-']:last-of-type {
-        padding-right: 0px;
-      }
-
-      .grid {
-        width: 100%;
-
-        margin: 0 auto;
-        overflow: hidden;
-      }
-
-      .grid:after {
-        content: "";
-        display: table;
-        clear: both;
-      }
-
-      .grid-pad {
-        padding: 20px 0 0px 20px;
-      }
-
-      .grid-pad > [class*='col-']:last-of-type {
-        padding-right: 20px;
-      }
-
-      .push-right {
-        float: right;
-      }
-
-      /* Content Columns */
-
-      .col-1-1 {
-        width: 100%;
-      }
-      .col-2-3, .col-8-12 {
-        width: 66.66%;
-      }
-
-      .col-1-2, .col-6-12 {
-        width: 50%;
-      }
-
-      .col-1-3, .col-4-12 {
-        width: 33.33%;
-      }
-
-      .col-1-4, .col-3-12 {
-        width: 25%;
-      }
-
-      .col-1-5 {
-        width: 20%;
-      }
-
-      .col-1-6, .col-2-12 {
-        width: 16.667%;
-      }
-
-      .col-1-7 {
-        width: 14.28%;
-      }
-
-      .col-1-8 {
-        width: 12.5%;
-      }
-
-      .col-1-9 {
-        width: 11.1%;
-      }
-
-      .col-1-10 {
-        width: 10%;
-      }
-
-      .col-1-11 {
-        width: 9.09%;
-      }
-
-      .col-1-12 {
-        width: 8.33%
-      }
-
-      /* Layout Columns */
-
-      .col-11-12 {
-        width: 91.66%
-      }
-
-      .col-10-12 {
-        width: 83.333%;
-      }
-
-      .col-9-12 {
-        width: 75%;
-      }
-
-      .col-5-12 {
-        width: 41.66%;
-      }
-
-      .col-7-12 {
-        width: 58.33%
-      }
-
-      @media handheld, only screen and (max-width: 767px) {
-
-
-        .grid {
-          width: 100%;
-          min-width: 0;
-          margin-left: 0px;
-          margin-right: 0px;
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-
-        [class*='col-'] {
-          width: auto;
-          float: none;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 10px;
-          margin-bottom: 10px;
-          padding-right: 0px;
-          padding-left: 0px;
-        }
-      }
-    </style>
+    <%= stylesheet_link_tag "pghero/application" %>
+    <%= javascript_include_tag "pghero/application" %>
   </head>
   <body>
     <div class="container">

data/app/views/pg_hero/home/_query_stats_slider.html.erb

@@ -4,173 +4,13 @@
   <div id="range-start"></div>
 </div>
 
-<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.css" %>
-<%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js", "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js" %>
-
-<style>
-  .noUi-connect {
-    box-shadow: none;
-    background: #5bc0de;
-  }
-
-  .noUi-handle {
-    box-shadow: none;
-  }
-
-  .noUi-target {
-    box-shadow: none;
-    border-color: #eee;
-  }
-
-  .noUi-background {
-    box-shadow: none;
-    background-color: #eee;
-  }
-
-  .noUi-origin {
-    border-radius: 0;
-  }
-</style>
-
 <script>
-  function roundTime(time) {
-    var period = 1000 * 60 * 5;
-    return new Date(Math.ceil(time.getTime() / period) * period);
-  }
-
-  function pad(num) {
-    return (num < 10) ? "0" + num : num;
-  }
-
   var sort = <%= @sort.to_json.html_safe %>;
   var minAverageTime = <%= @min_average_time.to_json %>;
   var minCalls = <%= @min_calls.to_json %>;
   var debug = <%= @debug.to_json %>;
-
-  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
-  var days = 1;
-  var now = new Date();
-  var sliderStartAt = roundTime(now) - days * 24 * 60 * 60 * 1000;
-  var sliderMax = 24 * 12 * days;
-
-  var startAt = <%= params[:start_at] ? @start_at.to_i * 1000 : "sliderStartAt" %>;
-  var min = (startAt > 0) ? (startAt - sliderStartAt) / (1000 * 60 * 5) : 0;
-
+  var startAt = <%= params[:start_at] ? @start_at.to_i * 1000 : "null" %>;
   var endAt = <%= @end_at.to_i %> * 1000;
-  var max = (endAt > 0) ? (endAt - sliderStartAt) / (1000 * 60 * 5) : sliderMax;
-
-  var $slider = $("#slider");
-
-  $slider.noUiSlider({
-    range: {
-      min: 0,
-      max: sliderMax
-    },
-    step: 1,
-    connect: true,
-    start: [min, max]
-  });
-
-  function updateText() {
-    var values = $slider.val();
-    setText("#range-start", values[0]);
-    setText("#range-end", values[1]);
-  }
-
-  function setText(selector, offset) {
-    var time = timeAt(offset);
-
-    var html = "";
-    if (time == now) {
-      if (selector == "#range-end") {
-        html = "Now";
-      }
-    } else {
-      html = months[time.getMonth()] + " " + time.getDate() + ", " + pad(time.getHours()) + ":" + pad(time.getMinutes());
-    }
-    $(selector).html(html);
-  }
-
-  function timeAt(offset) {
-    var time = new Date(sliderStartAt + (offset * 5) * 60 * 1000);
-    return (time > now) ? now : time;
-  }
-
-  function timeParam(time) {
-    return time.toISOString();
-  }
-
-  function queriesPath(params) {
-    var path = "queries";
-    if (params.start_at || params.end_at || params.sort || params.min_average_time || params.min_calls || params.debug) {
-      path += "?" + $.param(params);
-    }
-    return path;
-  }
-
-  function refreshStats(push) {
-    var values = $slider.val();
-    var startAt = push ? timeAt(values[0]) : new Date(window.startAt);
-    var endAt = timeAt(values[1]);
-
-    var params = {}
-    if (startAt.getTime() != sliderStartAt) {
-      params.start_at = timeParam(startAt);
-    }
-    if (endAt < now) {
-      params.end_at = timeParam(endAt);
-    }
-    if (sort) {
-      params.sort = sort;
-    }
-    if (minAverageTime) {
-      params.min_average_time = minAverageTime;
-    }
-    if (minCalls) {
-      params.min_calls = minCalls;
-    }
-    if (debug) {
-      params.debug = debug;
-    }
-
-    var path = queriesPath(params);
-
-    $(".queries-table th a").each( function () {
-      var p = $.extend({}, params, {sort: $(this).data("sort"), min_average_time: minAverageTime, min_calls: minCalls, debug: debug});
-      if (!p.sort) {
-        delete p.sort;
-      }
-      if (!p.min_average_time) {
-        delete p.min_average_time;
-      }
-      if (!p.min_calls) {
-        delete p.min_calls;
-      }
-      if (!p.debug) {
-        delete p.debug;
-      }
-      $(this).attr("href", queriesPath(p));
-    });
-
-
-    var callback = function (response, status, xhr) {
-      if (status === "error" ) {
-        $(".queries-info").css("color", "red").html(xhr.status + " " + xhr.statusText);
-      }
-    };
-    $("#queries").html('<tr><td colspan="3"><p class="queries-info text-muted">...</p></td></tr>').load(path, callback);
-
-    if (push && history.pushState) {
-      history.pushState(null, null, path);
-    }
-  }
 
-  $slider.on("slide", updateText).on("change", function () {
-    refreshStats(true);
-  });
-  updateText();
-  $( function () {
-    refreshStats(false);
-  });
+  initSlider();
 </script>