add analytics snapshot date in API response + display it

src/apps/api/views/analytics.py

@@ -191,8 +191,13 @@ def storage_usage_history(request):
                 'admin_usage': su['admin_usage'],
                 'orphaned_file_usage': su['orphaned_file_usage']
             }
+
+    response = {
+        "last_storage_calculation_date": last_storage_usage_history_snapshot.at_date.isoformat() if last_storage_usage_history_snapshot else None,
+        "storage_usage_history": storage_usage_history
+    }
 
-    return Response(storage_usage_history, status=status.HTTP_200_OK)
+    return Response(response, status=status.HTTP_200_OK)
 
 
 @api_view(["GET"])
@@ -230,8 +235,13 @@ def competitions_usage(request):
                 'created_when': su['competition__created_when'],
                 'datasets': su['datasets_total'],
             }
+
+    response = {
+        "last_storage_calculation_date": last_competition_storage_snapshot.at_date.isoformat() if last_competition_storage_snapshot else None,
+        "competitions_usage": competitions_usage
+    }
 
-    return Response(competitions_usage, status=status.HTTP_200_OK)
+    return Response(response, status=status.HTTP_200_OK)
 
 
 @api_view(["GET"])
@@ -270,4 +280,9 @@ def users_usage(request):
                 'submissions': su['submissions_total'],
             }
 
-    return Response(users_usage, status=status.HTTP_200_OK)
+    response = {
+        "last_storage_calculation_date": last_user_storage_snapshot.at_date.isoformat() if last_user_storage_snapshot else None,
+        "users_usage": users_usage
+    }
+
+    return Response(response, status=status.HTTP_200_OK)

src/static/riot/analytics/_competitions_usage.tag

@@ -1,15 +1,18 @@
 <analytics-storage-competitions-usage>
-    <select class="ui search multiple selection dropdown" multiple ref="competitions_dropdown">
-        <i class="dropdown icon"></i>
-        <div class="default text">Select Competitions</div>
-        <div class="menu">
-            <option each="{ competition in competitionsDropdownOptions }" value="{ competition.id }">{ competition.title }</div> 
-        </div>
-    </select>
-    <button class="ui button" onclick={selectTopFiveBiggestCompetitions}>Select top 5 biggest competitions</button>
-    <button class="ui green button" onclick={downloadCompetitionsHistory}>
-        <i class="icon download"></i>Download as CSV
-    </button>
+    <div class="flex-row">
+        <select class="ui search multiple selection dropdown" multiple ref="competitions_dropdown">
+            <i class="dropdown icon"></i>
+            <div class="default text">Select Competitions</div>
+            <div class="menu">
+                <option each="{ competition in competitionsDropdownOptions }" value="{ competition.id }">{ competition.title }</div> 
+            </div>
+        </select>
+        <button class="ui button" onclick={selectTopFiveBiggestCompetitions}>Select top 5 biggest competitions</button>
+        <button class="ui green button" onclick={downloadCompetitionsHistory}>
+            <i class="icon download"></i>Download as CSV
+        </button>
+        <h4 style="margin: 0 0 0 auto">{lastSnapshotDate ? "Last snaphost date: " + pretty_date(lastSnapshotDate) : "No snapshot has been taken yet"}</h4>
+    </div>
     <div class='chart-container'>
         <canvas class="big" ref="storage_competitions_usage_chart"></canvas>
     </div>
@@ -55,6 +58,7 @@
 
         let datetime = luxon.DateTime;
 
+        self.lastSnapshotDate = null;
         self.competitionsUsageData = null;
         self.competitionsDropdownOptions = [];
         self.tableSelectedDate = null;
@@ -221,9 +225,11 @@
             };
             CODALAB.api.get_competitions_usage(parameters)
                 .done(function(data) {
-                    self.competitionsUsageData = data;
+                    self.competitionsUsageData = data["competitions_usage"];
+                    self.lastSnapshotDate = data["last_storage_calculation_date"];
+                    self.update({lastSnapshotDate: data["last_storage_calculation_date"]});
                     self.updateCompetitionsSelectionDropdown();
-                    self.updateCompetitionTableCalendar(data);
+                    self.updateCompetitionTableCalendar(data["competitions_usage"]);
                     self.updateCompetitionsChart();
                     self.updateCompetitionsPieChart();
                     self.updateCompetitionsTable();
@@ -559,5 +565,10 @@
         .chart-container {
             min-height: 450px;
         }
+
+        .flex-row {
+            display: flex;
+            flex-direction: row;
+        }
     </style>
 </analytics-storage-competitions-usage>

src/static/riot/analytics/_usage_history.tag

@@ -1,7 +1,11 @@
 <analytics-storage-usage-history>
-    <button class="ui green button" onclick={downloadUsageHistory}>
-        <i class="icon download"></i>Download as CSV
-    </button>
+    <div class="flex-row">
+        <button class="ui green button" onclick={downloadUsageHistory}>
+            <i class="icon download"></i>Download as CSV
+        </button>
+
+        <h4 style="margin: 0 0 0 auto">{lastSnapshotDate ? "Last snaphost date: " + pretty_date(lastSnapshotDate) : "No snapshot has been taken yet"}</h4>
+    </div>
 
     <div class='chart-container'>
         <canvas class="big" ref="storage_usage_history_chart"></canvas>
@@ -17,6 +21,7 @@
         };
         self.storageUsageHistoryData = null;
         self.storageUsageChart = null;
+        self.lastSnapshotDate = null;
 
         self.one("mount", function () {
             self.state.startDate = opts.start_date;
@@ -121,8 +126,10 @@
             };
             CODALAB.api.get_storage_usage_history(parameters)
                 .done(function(data) {
-                    self.storageUsageHistoryData = data;
-                    self.update_storage_usage_history_chart(data);
+                    self.storageUsageHistoryData = data["storage_usage_history"];
+                    self.lastSnapshotDate = data["last_storage_calculation_date"];
+                    self.update({lastSnapshotDate: data["last_storage_calculation_date"]});
+                    self.update_storage_usage_history_chart(data["storage_usage_history"]);
                 })
                 .fail(function(error) {
                     toastr.error("Could not load storage analytics data");
@@ -177,5 +184,10 @@
         .chart-container {
             min-height: 450px;
         }
+
+        .flex-row {
+            display: flex;
+            flex-direction: row;
+        }
     </style>
 </analytics-storage-usage-history>

src/static/riot/analytics/_users_usage.tag

@@ -1,15 +1,18 @@
 <analytics-storage-users-usage>
-    <select class="ui search multiple selection dropdown" multiple ref="users_dropdown">
-        <i class="dropdown icon"></i>
-        <div class="default text">Select Users</div>
-        <div class="menu">
-            <option each="{ user in usersDropdownOptions }" value="{ user.id }">{ user.name }</div> 
-        </div>
-    </select>
-    <button class="ui button" onclick={selectTopFiveBiggestUsers}>Select top 5 biggest users</button>
-    <button class="ui green button" onclick={downloadUsersHistory}>
-        <i class="icon download"></i>Download as CSV
-    </button>
+    <div class="flex-row">
+        <select class="ui search multiple selection dropdown" multiple ref="users_dropdown">
+            <i class="dropdown icon"></i>
+            <div class="default text">Select Users</div>
+            <div class="menu">
+                <option each="{ user in usersDropdownOptions }" value="{ user.id }">{ user.name }</div> 
+            </div>
+        </select>
+        <button class="ui button" onclick={selectTopFiveBiggestUsers}>Select top 5 biggest users</button>
+        <button class="ui green button" onclick={downloadUsersHistory}>
+            <i class="icon download"></i>Download as CSV
+        </button>
+        <h4 style="margin: 0 0 0 auto">{lastSnapshotDate ? "Last snaphost date: " + pretty_date(lastSnapshotDate) : "No snapshot has been taken yet"}</h4>
+    </div>
     <div class='chart-container'>
         <canvas class="big" ref="storage_users_usage_chart"></canvas>
     </div>
@@ -62,6 +65,7 @@
 
         let datetime = luxon.DateTime;
 
+        self.lastSnapshotDate = null;
         self.usersUsageData = null;
         self.usersDropdownOptions = [];
         self.usersTableSelectedDate = null;
@@ -269,9 +273,11 @@
             };
             CODALAB.api.get_users_usage(parameters)
                 .done(function(data) {
-                    self.usersUsageData = data;
+                    self.usersUsageData = data["users_usage"];
+                    self.lastSnapshotDate = data["last_storage_calculation_date"];
+                    self.update({lastSnapshotDate: data["last_storage_calculation_date"]});
                     self.updateUsersSelectionDropdown();
-                    self.updateUsersTableCalendar(data);
+                    self.updateUsersTableCalendar(data["users_usage"]);
                     self.updateUsersChart();
                     self.updateUsersPieChart();
                     self.updateUsersTable();
@@ -640,5 +646,10 @@
         .chart-container {
             min-height: 450px;
         }
+
+        .flex-row {
+            display: flex;
+            flex-direction: row;
+        }
     </style>
 </analytics-storage-users-usage>

src/static/riot/analytics/analytics.tag

@@ -474,6 +474,14 @@
             self.update();
         }
 
+        self.pretty_date = function (date_string) {
+            if (!!date_string) {
+                return luxon.DateTime.fromISO(date_string).toLocaleString(luxon.DateTime.DATE_FULL)
+            } else {
+                return ''
+            }
+        }
+
     </script>
     <style>
         analytics {