Fix api metrics widget sizing and upgraded core dependencies

Author: roncodes

addon/components/widget/api-metrics.hbs

@@ -1,37 +1,37 @@
 <ContentPanel @title={{t "developers.component.widget.api-metrics.title"}} @open={{or @open true}} @wrapperClass="bordered-classic" @panelBodyClass="p-0i">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-gray-200 dark:bg-gray-800">
-        <div class="bg-white dark:bg-gray-900 p-5">
+        <div class="bg-white dark:bg-gray-900 p-2">
             <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
                 {{t "developers.component.widget.api-metrics.api-requests"}}
             </h4>
-            <div class="h-96">
+            <div class="relative" style={{html-safe "position: relative; height: 18rem; width: 100%;"}}>
                 <Chart @type="line" @datasets={{this.apiRequestData}} @options={{this.chartOptions}} />
             </div>
         </div>
 
-        <div class="bg-white dark:bg-gray-900 p-5">
+        <div class="bg-white dark:bg-gray-900 p-2">
             <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
                 {{t "developers.component.widget.api-metrics.api-error"}}
             </h4>
-            <div class="h-96">
+            <div class="relative" style={{html-safe "position: relative; height: 18rem; width: 100%;"}}>
                 <Chart @type="line" @datasets={{this.apiErrorDistributionData}} @options={{this.chartOptions}} />
             </div>
         </div>
 
-        <div class="bg-white dark:bg-gray-900 p-5">
+        <div class="bg-white dark:bg-gray-900 p-2">
             <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
                 {{t "developers.component.widget.api-metrics.webhooks"}}
             </h4>
-            <div class="h-96">
+            <div class="relative" style={{html-safe "position: relative; height: 18rem; width: 100%;"}}>
                 <Chart @type="line" @datasets={{this.webhookRequestData}} @options={{this.chartOptions}} />
             </div>
         </div>
 
-        <div class="bg-white dark:bg-gray-900 p-5">
+        <div class="bg-white dark:bg-gray-900 p-2">
             <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
                 {{t "developers.component.widget.api-metrics.webhooks-response"}}
             </h4>
-            <div class="h-96">
+            <div class="relative" style={{html-safe "position: relative; height: 18rem; width: 100%;"}}>
                 <Chart @type="line" @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
             </div>
         </div>

addon/components/widget/api-metrics.js

@@ -252,16 +252,6 @@ export default class WidgetApiMetricsComponent extends Component {
                 .then((webhookRequestLogs) => {
                     const records = webhookRequestLogs.toArray();
 
-                    // Debug: Check first record
-                    if (records.length > 0) {
-                        console.log('[webhook-timing] First record:', {
-                            duration: records[0].duration,
-                            type: typeof records[0].duration,
-                            parsed: parseFloat(records[0].duration || 0),
-                            ms: parseFloat(records[0].duration || 0) * 1000,
-                        });
-                    }
-
                     const data = records.map((req) => {
                         // Duration might be a string, ensure it's parsed as float
                         const duration = req.duration;
@@ -274,8 +264,6 @@ export default class WidgetApiMetricsComponent extends Component {
                         };
                     });
 
-                    console.log('[webhook-timing] Data points:', data.length, 'Sample:', data[0]);
-
                     // Show points if we have sparse data
                     const showPoints = records.length < 50;
 

addon/styles/dev-engine.css

@@ -44,3 +44,9 @@
 body[data-theme='dark'] .webhook-attempts-date-filter-container > .date-filter-label {
     color: #9ca3af;
 }
+
+.ui-chart {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}

addon/templates/home/index.hbs

@@ -1,3 +1,3 @@
-<Layout::Section::Body class="mx-auto max-w-6xl p-8">
+<Layout::Section::Body class="mx-auto max-w-6xl p-8 h-full overflow-y-scroll">
     <Widget::ApiMetrics />
 </Layout::Section::Body>

package.json

@@ -43,7 +43,7 @@
     "dependencies": {
         "@babel/core": "^7.23.2",
         "@fleetbase/ember-core": "^0.3.8",
-        "@fleetbase/ember-ui": "^0.3.13",
+        "@fleetbase/ember-ui": "^0.3.14",
         "@fortawesome/ember-fontawesome": "^2.0.0",
         "@fortawesome/fontawesome-svg-core": "6.4.0",
         "@fortawesome/free-brands-svg-icons": "6.4.0",