Updated core dependencies, and removed redundant ember-ui styles filt…

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>

index.js

@@ -1,60 +1,10 @@
 'use strict';
 const { buildEngine } = require('ember-engines/lib/engine-addon');
 const { name } = require('./package');
-const Funnel = require('broccoli-funnel');
-
-function isDevServe() {
-    // env checks
-    const env = process.env.EMBER_ENV || process.env.NODE_ENV || 'development';
-    const isProd = env === 'production' || process.env.CI === 'true';
-
-    // command-line checks (serve/watch only)
-    const argv = process.argv.join(' ');
-    const isServeCmd = /\b(ember|node).* (serve|server)\b/.test(argv) || process.argv.includes('serve') || process.argv.includes('server');
-    const isWatch = process.argv.includes('--watch') || process.env.BROCCOLI_WATCHER;
-
-    return !isProd && (isServeCmd || isWatch);
-}
 
 module.exports = buildEngine({
     name,
 
-    init() {
-        if (this._super.init) this._super.init.apply(this, arguments);
-
-        if (isDevServe()) {
-            for (let addon of this.addons || []) {
-                if (['@fleetbase/ember-core', '@fleetbase/ember-ui'].includes(addon.name)) {
-                    let origTreeFor = addon.treeFor?.bind(addon);
-                    addon.treeFor = function (type) {
-                        if (type === 'styles') {
-                            return undefined;
-                        }
-                        return origTreeFor ? origTreeFor(type) : undefined;
-                    };
-                }
-            }
-
-            const origNonDup = this.nonDuplicatedAddonInvoke?.bind(this);
-            this.nonDuplicatedAddonInvoke = (hook, args = []) => {
-                if (hook === 'treeFor' && args[0] === 'styles') {
-                    return []; // prevents dependency style relocation funnel (dev-only)
-                }
-                return origNonDup ? origNonDup(hook, args) : [];
-            };
-        }
-    },
-
-    postprocessTree(type, tree) {
-        if (type === 'css') {
-            tree = new Funnel(tree, {
-                exclude: ['**/@fleetbase/ember-ui/**/*.css'],
-            });
-        }
-
-        return tree;
-    },
-
     lazyLoading: {
         enabled: true,
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/dev-engine",
-    "version": "0.2.11",
+    "version": "0.2.12",
     "description": "Fleetbase Developers extension provides a module for managing developer resources such as API keys, webhooks, sockets, events and logs.",
     "fleetbase": {
         "route": "developers"
@@ -42,8 +42,8 @@
     },
     "dependencies": {
         "@babel/core": "^7.23.2",
-        "@fleetbase/ember-core": "^0.3.7",
-        "@fleetbase/ember-ui": "^0.3.12",
+        "@fleetbase/ember-core": "^0.3.8",
+        "@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",