fix: refactor accordion component to use watch for open state changes

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/views/instances/httpexchanges/exchanges-chart.vue

@@ -32,7 +32,6 @@ import {
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 import { parse } from 'iso8601-duration';
-import moment from 'moment';
 import { markRaw } from 'vue';
 
 import { toMilliseconds } from '@/utils/iso8601-duration';
@@ -55,7 +54,6 @@ export default {
       default: () => [],
     },
   },
-  emits: ['selected'],
   data: () => ({
     chart: null,
     cachedChartData: [],
@@ -66,14 +64,14 @@ export default {
         return [];
       }
       const chartData = [];
-      const now = moment().valueOf();
       let idx = this.exchanges.length - 1;
       const oldest =
         this.exchanges[this.exchanges.length - 1].timestamp.valueOf();
+      const newest = this.exchanges[0].timestamp.valueOf();
 
       for (
         let time = Math.floor(oldest.valueOf() / interval) * interval;
-        time < now;
+        time <= newest;
         time += interval
       ) {
         const bucket = {

spring-boot-admin-server-ui/src/main/frontend/views/instances/httpexchanges/i18n.de.json

@@ -13,9 +13,9 @@
       "limit": "Limit",
       "filter": {
         "client_errors": "Client-Fehler",
-        "exclude_actuator": "ignoriere  {actuator}/**",
+        "exclude_actuator": "Ignoriere {actuator}/**",
         "server_errors": "Server-Fehler",
-        "success": "erfolgreich"
+        "success": "Erfolgreich"
       },
       "method": "Methode",
       "no_data": "Keine Anzeigedaten vorhanden.",

spring-boot-admin-server-ui/src/main/frontend/views/instances/httpexchanges/i18n.en.json

@@ -1,7 +1,7 @@
 {
   "instances": {
     "httpexchanges": {
-      "auto_follow": "Follow tail",
+      "auto_follow": "Auto update",
       "label": "HTTP Exchanges",
       "chart": {
         "avg_time": "ø duration",

spring-boot-admin-server-ui/src/main/frontend/views/instances/httpexchanges/index.vue

@@ -51,10 +51,6 @@
           </sba-input>
 
           <div class="grid grid-rows-2 grid-flow-col gap-x-2 text-sm">
-            <sba-checkbox
-              v-model="autoFollow"
-              :label="$t('instances.httpexchanges.auto_follow')"
-            />
             <sba-checkbox
               v-model="filter.showSuccess"
               :label="$t('instances.httpexchanges.filter.success')"
@@ -76,16 +72,25 @@
               "
             />
           </div>
+          <div>
+            <sba-button
+              :title="$t('instances.httpexchanges.auto_follow')"
+              :primary="autoFollow"
+              @click="autoFollow = !autoFollow"
+            >
+              <font-awesome-icon :icon="faArrowsDownToLine" />
+              <span
+                class="sr-only"
+                v-text="$t('instances.httpexchanges.auto_follow')"
+              />
+            </sba-button>
+          </div>
         </div>
       </sba-sticky-subnav>
     </template>
 
     <sba-panel>
-      <sba-exchanges-chart
-        :exchanges="filteredExchanges"
-        class="mb-6"
-        @selected="updateSelection"
-      />
+      <sba-exchanges-chart :exchanges="listedExchanges" class="mb-6" />
     </sba-panel>
 
     <sba-panel seamless>
@@ -95,6 +100,7 @@
 </template>
 
 <script>
+import { faArrowsDownToLine } from '@fortawesome/free-solid-svg-icons';
 import { debounce } from 'lodash-es';
 import moment from 'moment';
 import { take } from 'rxjs/operators';
@@ -134,6 +140,7 @@ export default {
     error: null,
     exchanges: [],
     listOffset: 0,
+    faArrowsDownToLine,
     filter: {
       excludeActuator: true,
       showSuccess: true,
@@ -182,10 +189,6 @@ export default {
     },
   },
   methods: {
-    updateSelection(selection) {
-      this.selection = selection;
-      this.showNewExchanges();
-    },
     showNewExchanges() {
       this.listOffset = 0;
     },