Repository: kestra-io/kestra
Issue: [UI] Add "Last 5 minutes" filter to Metrics
Labels: enhancement
frontend
good first issue

### Feature description

It would be useful to allow a fine-granular overview of metrics from the last couple of runs. 

![image](https://github.com/kestra-io/kestra/assets/86264395/dacd0bd5-c3e7-46d0-bf0a-ebf42dcedec0)

see https://github.com/kestra-io/kestra/issues/1753#issuecomment-1705727664 

(the period is TBD, 5 min seems to make sense - it could be 15 min)


Issue comments:
Hey @anna-geller , 
Can I contribute to this ?
@chinmaym07 for sure, the task is for you 
@anna-geller @tchiotludo
Hey guys, hope you don't mind I've implemented it. Seemed like low hanging fruit. 
for sure, thanks so much!

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/layout/DateRange.vue b/ui/src/components/layout/DateRange.vue
index ff2aef399b..7fe91c7e3c 100644
--- a/ui/src/components/layout/DateRange.vue
+++ b/ui/src/components/layout/DateRange.vue
@@ -22,110 +22,117 @@
                     monthBeforeYear: false,
                 },
                 shortcuts: [
+                    {
+                        text: this.$t("datepicker.last5minutes"),
+                        value: () => ([
+                            this.$moment().add(-5, "minutes").toDate(),
+                            this.$moment().toDate()
+                        ]),
+                    },
                     {
                         text: this.$t("datepicker.last1hour"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "hour").toDate(),
                             this.$moment().toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.last12hours"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-12, "hour").toDate(),
                             this.$moment().toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.last24hours"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "day").toDate(),
                             this.$moment().toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.today"),
-                        value: [
+                        value: () => ([
                             this.$moment().startOf("day").toDate(),
                             this.$moment().endOf("day").toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.yesterday"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "day").startOf("day").toDate(),
                             this.$moment().add(-1, "day").endOf("day").toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.dayBeforeYesterday"),
-                        onClick: () => [
+                        value: () => ([
                             this.$moment().add(-2, "day").startOf("day").toDate(),
                             this.$moment().add(-2, "day").endOf("day").toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.thisWeek"),
-                        value: [
+                        value: () => ([
                             this.$moment().startOf("isoWeek").toDate(),
                             this.$moment().endOf("isoWeek").toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.thisWeekSoFar"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "isoWeek").toDate(),
                             this.$moment().toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.previousWeek"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "week").startOf("isoWeek").toDate(),
                             this.$moment().add(-1, "week").endOf("isoWeek").toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.thisMonth"),
-                        value: [
+                        value: () => ([
                             this.$moment().startOf("month").toDate(),
                             this.$moment().endOf("month").toDate(),
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.thisMonthSoFar"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "month").toDate(),
                             this.$moment().toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.previousMonth"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "month").startOf("month").toDate(),
                             this.$moment().add(-1, "month").endOf("month").toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.thisYear"),
-                        value: [
+                        value: () => ([
                             this.$moment().startOf("year").toDate(),
                             this.$moment().endOf("year").toDate(),
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.thisYearSoFar"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "year").toDate(),
                             this.$moment().toDate()
-                        ],
+                        ]),
                     },
                     {
                         text: this.$t("datepicker.previousYear"),
-                        value: [
+                        value: () => ([
                             this.$moment().add(-1, "year").startOf("year").toDate(),
                             this.$moment().add(-1, "year").endOf("year").toDate()
-                        ],
+                        ]),
                     },
                 ],
             }
@@ -151,7 +158,7 @@
         computed: {
             date() {
                 return [new Date(this.startDate), new Date(this.endDate)];
-            }
+            },
         }
     };
 </script>
diff --git a/ui/src/translations.json b/ui/src/translations.json
index 8234bf8722..cca8dd93de 100644
--- a/ui/src/translations.json
+++ b/ui/src/translations.json
@@ -53,6 +53,7 @@
     "topology": "Topology",
     "date": "Date",
     "datepicker": {
+      "last5minutes": "Last 5 minutes",
       "last1hour": "Last 1 hour",
       "last12hours": "Last 12 hours",
       "last24hours": "Last 24 hours",
@@ -560,6 +561,7 @@
     "topology": "Topologie",
     "date": "Date",
     "datepicker": {
+      "last5minutes": "5 dernières minutes",
       "last1hour": "Dernière heure",
       "last12hours": "12 dernières heures",
       "last24hours": "24 dernières heures",


Test patch: