Add date range filtering to the Query Log

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>

package.json

@@ -15,7 +15,7 @@
     "node-sass-chokidar": "^1.3.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.14.3",
-    "react-scripts": "^2.0.5",
+    "react-scripts": "^2.1.3",
     "react-test-renderer": "^16.4.1"
   },
   "dependencies": {
@@ -24,6 +24,7 @@
     "@coreui/icons": "0.2.0",
     "@coreui/react": "^2.0.4",
     "bootstrap": "^4.1.1",
+    "bootstrap-daterangepicker": "^3.0.3",
     "chart.js": "^2.7.2",
     "font-awesome": "^4.7.0",
     "i18next": "^11.3.2",
@@ -31,8 +32,10 @@
     "i18next-xhr-backend": "^1.5.1",
     "ionicons": "^3.0.0",
     "lodash.debounce": "^4.0.8",
+    "moment": "^2.23.0",
     "prop-types": "^15.6.1",
     "react": "^16.4.1",
+    "react-bootstrap-daterangepicker": "^4.1.0",
     "react-bootstrap-typeahead": "^3.2.4",
     "react-chartjs-2": "^2.7.2",
     "react-dom": "^16.4.1",

src/components/log/QueryLog.js

@@ -10,12 +10,16 @@
 
 import React, { Component, Fragment } from "react";
 import ReactTable from "react-table";
+import DateRangePicker from "react-bootstrap-daterangepicker";
+import { Button } from "reactstrap";
 import i18n from "i18next";
 import { translate } from "react-i18next";
 import debounce from "lodash.debounce";
+import moment from "moment";
 import { ignoreCancel, makeCancelable, padNumber } from "../../util";
 import api from "../../util/api";
 import "react-table/react-table.css";
+import "bootstrap-daterangepicker/daterangepicker.css";
 
 class QueryLog extends Component {
   updateHandler = null;
@@ -25,7 +29,15 @@ class QueryLog extends Component {
     loading: false,
     atEnd: false,
     filtersChanged: false,
-    filters: []
+    filters: [
+      {
+        id: "time",
+        value: {
+          start: dateRanges.Today[0],
+          end: dateRanges.Today[1]
+        }
+      }
+    ]
   };
 
   componentWillUnmount() {
@@ -67,6 +79,18 @@ class QueryLog extends Component {
 
     for (const filter of tableFilters) {
       switch (filter.id) {
+        case "time":
+          filters.from = Math.floor(
+            moment(filter.value.start)
+              .utc()
+              .valueOf() / 1000
+          );
+          filters.until = Math.floor(
+            moment(filter.value.end)
+              .utc()
+              .valueOf() / 1000
+          );
+          break;
         case "queryType":
           if (filter.value === "all") {
             // Filter is not applied
@@ -306,6 +330,34 @@ const selectionFilter = (items, t, extras = []) => {
   );
 };
 
+/**
+ * Preconfigured date ranges listed in the date range picker
+ */
+const dateRanges = {
+  Today: [moment().startOf("day"), moment()],
+  Yesterday: [
+    moment()
+      .subtract(1, "days")
+      .startOf("day"),
+    moment()
+      .subtract(1, "days")
+      .endOf("day")
+  ],
+  "Last 7 Days": [moment().subtract(6, "days"), moment()],
+  "Last 30 Days": [moment().subtract(29, "days"), moment()],
+  "This Month": [moment().startOf("month"), moment()],
+  "Last Month": [
+    moment()
+      .subtract(1, "month")
+      .startOf("month"),
+    moment()
+      .subtract(1, "month")
+      .endOf("month")
+  ],
+  "This Year": [moment().startOf("year"), moment()],
+  "All Time": [moment(0), moment()]
+};
+
 /**
  * The columns of the Query Log. Some pieces are translated, so you must pass in
  * the translation function before using the columns.
@@ -333,7 +385,26 @@ const columns = t => [
           {hour + ":" + minute + ":" + second}
         </Fragment>
       );
-    }
+    },
+    filterable: true,
+    filterMethod: () => true, // Don't filter client side
+    Filter: ({ filter, onChange }) => (
+      <DateRangePicker
+        startDate={filter ? filter.value.start : dateRanges.Today[0]}
+        endDate={filter ? filter.value.end : dateRanges.Today[1]}
+        maxDate={dateRanges.Today[1]}
+        onApply={(event, picker) =>
+          onChange({ start: picker.startDate, end: picker.endDate })
+        }
+        timePicker={true}
+        showDropdowns={true}
+        ranges={dateRanges}
+      >
+        <Button color="light" size="sm">
+          <i className="fa fa-clock-o fa-lg" />
+        </Button>
+      </DateRangePicker>
+    )
   },
   {
     Header: t("Type"),