From ad12df0f9335724e6261c8b0e641baff4f60cd2d Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 23 May 2016 15:51:34 -0400
Subject: [PATCH] Fix logs UI around date time handling

Makes the UI nicer looking and removes the 2 week limit; instead we have a 1 month limit, which is the max days we keep the logs in the database before being rotated.

Fixes #1480
---
 static/css/directives/ui/logs-view.css | 10 ++++++++++
 static/directives/logs-view.html       | 11 +++++++++--
 static/js/directives/ui/logs-view.js   | 17 ++++++-----------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/static/css/directives/ui/logs-view.css b/static/css/directives/ui/logs-view.css
index 2b352d373..cabda9eff 100644
--- a/static/css/directives/ui/logs-view.css
+++ b/static/css/directives/ui/logs-view.css
@@ -48,12 +48,22 @@
   width: 122px;
 }
 
+.logs-view-element .datepicker {
+  padding: 12px;
+}
+
+.logs-view-element .datepicker button {
+  border: 0px;
+}
+
 .logs-view-element .manager-header input {
   font-size: 14px;
   text-align: center;
   border: 1px solid #eee;
   padding: 4px;
   border-radius: 4px;
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 .logs-view-element .manager-header .right {
diff --git a/static/directives/logs-view.html b/static/directives/logs-view.html
index 342221db3..c5d30b6aa 100644
--- a/static/directives/logs-view.html
+++ b/static/directives/logs-view.html
@@ -3,12 +3,19 @@
     <span id="logs-range" class="mini">
       <span class="date-line">
         <span class="date-line-caption">From</span>
-        <input type="text" class="logs-date-picker input-sm" name="start" ng-model="options.logStartDate" data-max-date="{{ options.logEndDate }}" data-container="body" bs-datepicker/>
+        <input type="text" class="logs-date-picker input-sm" name="start"
+               ng-model="options.logStartDate" data-min-date="{{ options.monthAgo }}"
+               data-max-date="{{ options.logEndDate }}"
+               bs-datepicker>
       </span>
 
       <span class="date-line">
         <span class="date-line-caption add-on">to</span>
-        <input type="text" class="logs-date-picker input-sm" name="end" ng-model="options.logEndDate" data-min-date="{{ options.logStartDate }}" bs-datepicker/>
+        <input type="text" class="logs-date-picker input-sm" name="end"
+               ng-model="options.logEndDate" data-min-date="{{ options.logStartDate }}"
+               data-max-date="{{ options.now }}"
+               data-placement="bottom-right"
+               bs-datepicker>
       </span>
     </span>
     <span class="hidden-xs right">
diff --git a/static/js/directives/ui/logs-view.js b/static/js/directives/ui/logs-view.js
index d791c1584..1e8b09f91 100644
--- a/static/js/directives/ui/logs-view.js
+++ b/static/js/directives/ui/logs-view.js
@@ -29,6 +29,12 @@ angular.module('quay').directive('logsView', function () {
       var datetime = new Date();
       $scope.options.logStartDate = new Date(datetime.getUTCFullYear(), datetime.getUTCMonth(), datetime.getUTCDate() - 7);
       $scope.options.logEndDate = new Date(datetime.getUTCFullYear(), datetime.getUTCMonth(), datetime.getUTCDate());
+      $scope.options.monthAgo = moment().subtract(1, 'month').calendar();
+      $scope.options.now = new Date(datetime.getUTCFullYear(), datetime.getUTCMonth(), datetime.getUTCDate());
+
+      var getOffsetDate = function(date, days) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+      };
 
       var defaultPermSuffix = function(metadata) {
         if (metadata.activating_username) {
@@ -283,10 +289,6 @@ angular.module('quay').directive('logsView', function () {
         return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
       };
 
-      var getOffsetDate = function(date, days) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
-      };
-
       var getUrl = function(suffix) {
         var url = UtilService.getRestUrl('user/' + suffix);
         if ($scope.organization) {
@@ -320,16 +322,9 @@ angular.module('quay').directive('logsView', function () {
           return;
         }
 
-        var twoWeeksAgo = getOffsetDate($scope.options.logEndDate, -14);
-        if ($scope.options.logStartDate > $scope.options.logEndDate ||
-            $scope.options.logStartDate < twoWeeksAgo) {
-          $scope.options.logStartDate = twoWeeksAgo;
-        }
-
         $scope.chartLoading = true;
 
         var aggregateUrl = getUrl('aggregatelogs')
-
         var loadAggregate = Restangular.one(aggregateUrl);
         loadAggregate.customGET().then(function(resp) {
           $scope.chart = new LogUsageChart(logKinds);