feat(ui) add convenient dates like last 24h etc, for selecting incide…

…nts camunda-community-hub#438 fix popper.js was not correctly loaded for bootstrap (requires UMD) update recent bootstrap and popper minor version
nitram509 · Oct 5, 2022 · 5aa3589 · 5aa3589
1 parent 58a6aaf
commit 5aa3589
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/pom.xml b/pom.xml
@@ -169,12 +169,12 @@
         <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>bootstrap</artifactId>
-            <version>4.6.0-1</version>
+            <version>4.6.2</version>
         </dependency>
         <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>popper.js</artifactId>
-            <version>1.16.0</version>
+            <version>1.16.1-lts</version>
         </dependency>
         <dependency>
             <groupId>org.webjars</groupId>

diff --git a/src/main/resources/templates/incident-list-view.html b/src/main/resources/templates/incident-list-view.html
@@ -17,6 +17,19 @@
                 <div class="col-auto">
                     <div class="input-group mb-2">
                         <input type="text" class="form-control" id="filter-created-after" name="createdAfter" placeholder="created after" style="width: 15em">
+                        <div class="btn-group dropleft">
+                            <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <svg class="bi" width="12" height="12" fill="silver"><use xlink:href="/img/bootstrap-icons.svg#clock-history"/></svg>
+                            </button>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item" id="last-7-days" href="#">last 7 days</a>
+                                <a class="dropdown-item" id="last-24-hours" href="#">last 24 hours</a>
+                                <a class="dropdown-item" id="last-12-hours" href="#">last 12 hours</a>
+                                <a class="dropdown-item" id="last-6-hours" href="#">last 6 hours</a>
+                                <a class="dropdown-item" id="last-1-hour" href="#">last 1 hour</a>
+                                <a class="dropdown-item" id="last-10-minutes" href="#">last 10 minutes</a>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="col-auto">
@@ -96,6 +109,22 @@
                 bindQueryParamToElement("filter-created-after", "createdAfter");
                 bindQueryParamToElement("filter-created-before", "createdBefore");
             }, false);
+            document.addEventListener('DOMContentLoaded', function() {
+                function createLastTimeHandler(timeDiff) {
+                    return function() {
+                        'use strict';
+                        let past = new Date().getTime() - timeDiff;
+                        let newVal = new Date(past).toISOString();
+                        document.getElementById("filter-created-after").setAttribute("value", newVal);
+                    }
+                }
+                $("#last-7-days").click(createLastTimeHandler(1000*60*60*24*7));
+                $("#last-24-hours").click(createLastTimeHandler(1000*60*60*24));
+                $("#last-12-hours").click(createLastTimeHandler(1000*60*60*12));
+                $("#last-6-hours").click(createLastTimeHandler(1000*60*60*6));
+                $("#last-1-hour").click(createLastTimeHandler(1000*60*60));
+                $("#last-10-minutes").click(createLastTimeHandler(1000*60*10));
+            }, false);
         </script>
     </div>
 </div>

diff --git a/src/main/resources/templates/layout/footer.html b/src/main/resources/templates/layout/footer.html
@@ -4,7 +4,7 @@
 
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="{{context-path}}webjars/jquery/jquery.min.js"></script>
-<script src="{{context-path}}webjars/popper.js/1.16.0/popper.min.js"></script>
+<script src="{{context-path}}webjars/popper.js/umd/popper.min.js"></script>
 <script src="{{context-path}}webjars/bootstrap/js/bootstrap.min.js"></script>
 
 <script src="{{context-path}}webjars/sockjs-client/sockjs.min.js"></script>