Repository: kestra-io/kestra
Issue: Set the default filter to 7 days on the Logs and Executions pages to prevent `Timeout of 15000ms exceeded` when loading those UI pages
Labels: bug

### Expected Behavior

the issue we identified with Brian: on the homepage at the bottom, there's an element that logs errors and it's not properly unloaded when switching pages from Home to any other page - flows/logs etc.

![image](https://github.com/kestra-io/kestra/assets/86264395/51f6f3bf-9d8b-4366-9ac4-c32552d42603)


### Actual Behaviour

_No response_

### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version: 0.12 snapshot develop full image with Docker Compose


### Example flow

_No response_

Issue comments:
issue doesn't happen anymore on my local instance; we only found it on the preview when loading logs

![image](https://github.com/kestra-io/kestra/assets/86264395/aec3b807-ada7-4c80-a5e2-ebabd11f024b)


TODO: improve the DB index or optimize the log query for the Logs page -- it's likely only a Postgres indexing issue, not a UI issue
On the logs page, by default, there is no date filter which is causing the full table to be read. We cannot really do anything about it, we should set a default date filter (like 30 days as in the homepage).
@anna-geller the same issue exist on the executions page, I think we should set a default date filter of 30 days on both these pages as otherwise they'll read the full table then sort on the date which is impossible for large tables.
@loicmathieu good point - WDYT about only 7 days filter by default? seems like a good option for those who run thousands of executions
even if there is a limit ? 
@tchiotludo in fact there should be a limit as there is pagination, I'll double-check what was done on the log page.
~I checked and the LogRepository didn't fetch a page like other repository but all logs. That's why it takes so long.
So the bug is that the JDBC repository didn't paginate the find query.~
Forget my last comment I was on 0.9 checking for a bug so not looking at the latest code that correctly select a page.
As we order by timestamp, even if we only load 50 logs we must scan the all table, if we add a time we will only scan the index so it will work (and the same issue should exist for the execution page).

So back to my idea of limiting to 30 (or 7) days by default on both the executions and logs page.
By the way the same issue exist on the Flows page as it display an histogram of flow executions so we may also add a time filter here (which will be a little strange) or maybe just remove the diagram as it's a duplication of the one in the Executions page.
> As we order by timestamp, even if we only load 50 logs we must scan the all table, if we add a time we will only scan the index so it will work (and the same issue should exist for the execution page).

Index on the timestamp must limit on the latest 50 only, it's the main goal of this index
Postgres is not a vector database, indexes are stored using a B-Tree structure, which is not suitable for limiting the number of rows scanned so all rows will be scanned (whether on the index or on the table which will not make any difference).

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index a3905c0d79..c810771cfb 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -21,8 +21,8 @@
                 </el-form-item>
                 <el-form-item>
                     <date-range
-                        :start-date="$route.query.startDate"
-                        :end-date="$route.query.endDate"
+                        :start-date="startDate"
+                        :end-date="endDate"
                         @update:model-value="onDataTableValue($event)"
                     />
                 </el-form-item>
@@ -303,7 +303,7 @@
             },
             isAllowedEdit() {
                 return this.user.isAllowed(permission.FLOW, action.UPDATE, this.flow.namespace);
-            },
+            }
         },
         methods: {
             selectionMapper(execution) {
@@ -318,6 +318,11 @@
             loadQuery(base, stats) {
                 let queryFilter = this.queryWithFilter();
 
+                if ((!queryFilter["startDate"] || !queryFilter["endDate"]) && !stats) {
+                    queryFilter["startDate"] = this.startDate;
+                    queryFilter["endDate"] = this.endDate;
+                }
+
                 if (stats) {
                     delete queryFilter["startDate"];
                     delete queryFilter["endDate"];
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
index b91322da84..186b6939c0 100644
--- a/ui/src/components/logs/LogsWrapper.vue
+++ b/ui/src/components/logs/LogsWrapper.vue
@@ -22,8 +22,8 @@
                     </el-form-item>
                     <el-form-item>
                         <date-range
-                            :start-date="$route.query.startDate"
-                            :end-date="$route.query.endDate"
+                            :start-date="startDate"
+                            :end-date="endDate"
                             @update:model-value="onDataTableValue($event)"
                         />
                     </el-form-item>
@@ -102,6 +102,13 @@
             },
             selectedLogLevel() {
                 return this.logLevel || this.$route.query.level || localStorage.getItem("defaultLogLevel") || "INFO";
+            },
+            endDate() {
+                return this.$route.query.endDate ? this.$route.query.endDate : this.$moment().toISOString(true);
+            },
+            startDate() {
+                return this.$route.query.startDate ? this.$route.query.startDate : this.$moment(this.endDate)
+                    .add(-7, "days").toISOString(true);
             }
         },
         methods: {
@@ -113,6 +120,11 @@
                     queryFilter["flowId"] = this.$route.params.id;
                 }
 
+                if (!queryFilter["startDate"] || !queryFilter["endDate"]) {
+                    queryFilter["startDate"] = this.startDate;
+                    queryFilter["endDate"] = this.endDate;
+                }
+
                 delete queryFilter["level"];
 
                 return _merge(base, queryFilter)


Test patch: