Add dashboard metric component and initialize widgets

console/app/components/dashboard/metric.hbs

@@ -0,0 +1,18 @@
+<div class="col-span-{{or @dashboard.size 12}}">
+    <div class="dashboard-title flex flex-col lg:flex-row lg:items-center">
+        <div class="flex flex-row items-center mb-2 lg:mb-0">
+            {{#if this.isLoading}}
+                <Spinner class="mr-2i" />
+            {{/if}}
+            <h2 class="text-sm font-bold dark:text-gray-100 text-black">{{this.dashboard.title}}</h2>
+        </div>
+        <div>
+            <Dashboard::QueryParams @params={{this.dashboard.queryParams}} @onChange={{this.onQueryParamsChanged}} />
+        </div>
+    </div>
+    <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
+        {{#each this.dashboard.widgets as |widget|}}
+            {{component (concat "dashboard/" widget.component) options=widget.options}}
+        {{/each}}
+    </div>
+</div>

console/app/components/dashboard/metric.js

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
+import { ar } from 'date-fns/locale';
+
+export default class MetricComponent extends Component {
+    @service fetch;
+    @tracked isLoading = false;
+    @tracked dashboard;
+
+    constructor() {
+        super(...arguments);
+        console.log('Dashboard in Metric: ', this.args.options);
+        this.loadDashboard.perform();
+    }
+
+    @action onQueryParamsChanged(changedParams) {
+        this.loadDashboard.perform(changedParams);
+    }
+
+    @task *loadDashboard(params) {
+        let dashboards = [];
+
+        this.isLoading = true;
+
+        try {
+            dashboards = yield this.fetch.get(this.args.options.endpoint, params, { namespace: '' });
+        } catch {
+            return;
+        }
+
+        this.isLoading = false;
+
+        if (isArray(dashboards)) {
+            this.dashboard = dashboards.objectAt(0);
+        }
+    }
+}

console/app/instance-initializers/initialize-widgets.js

@@ -1,51 +1,6 @@
 export function initialize(application) {
     const universe = application.lookup('service:universe');
 
-    const fleetOpsWidgetConfigs = [
-        { name: 'Earnings', format: 'money', currency: 'USD' },
-        { name: 'Fuel costs', format: 'money', currency: 'USD' },
-        { name: 'Total distance traveled', format: 'meters' },
-        { name: 'Orders canceled' },
-        { name: 'Orders completed' },
-        { name: 'Orders in progress' },
-        { name: 'Orders scheduled' },
-        { name: 'Drivers online' },
-        { name: 'Total drivers' },
-        { name: 'Open Issues' },
-        { name: 'Total customers' },
-        { name: 'Open Issues' },
-        { name: 'Resolved Issues' },
-    ];
-
-    const storefrontWidgetConfigs = [
-        { name: 'Total Products' },
-        { name: 'Total Stores' },
-        { name: 'Total Networks' },
-        { name: 'Ordser in progress' },
-        { name: 'Orders completed' },
-        { name: 'Orders canceled' },
-    ];
-
-    const iamWidgetConfigs = [{ name: 'User count' }, { name: 'Group count' }, { name: 'Policy count' }, { name: 'Role count' }];
-
-    const createWidgets = (configs) => configs.map(({ name, format, currency }) => createWidget(name, format, currency));
-
-    const createWidget = (name, format, currency) => ({
-        name,
-        component: 'dashboard/count',
-        grid_options: { w: 2, h: 2 },
-        options: {
-            title: name,
-            value: 0,
-            ...(format && { format }),
-            ...(currency && { currency }),
-        },
-    });
-
-    const fleetOpsWidgets = createWidgets(fleetOpsWidgetConfigs);
-    const storefrontWidgets = createWidgets(storefrontWidgetConfigs);
-    const iamWidgets = createWidgets(iamWidgetConfigs);
-
     const availableWidgets = [
         {
             name: 'Fleetbase Blog',
@@ -63,9 +18,33 @@ export function initialize(application) {
                 title: 'Github Card',
             },
         },
-        ...fleetOpsWidgets,
-        ...storefrontWidgets,
-        ...iamWidgets,
+        {
+            name: 'Fleet-Ops Metrics',
+            component: 'dashboard/metric',
+            grid_options: { w: 12, h: 4 },
+            options: {
+                title: 'Fleet-Ops Metrics',
+                endpoint: 'int/v1/fleet-ops/dashboard',
+            },
+        },
+        {
+            name: 'Identity & Access Management Metrics',
+            component: 'dashboard/metric',
+            grid_options: { w: 12, h: 3 },
+            options: {
+                title: 'Identity & Access Management Metrics',
+                endpoint: 'int/v1/metrics/iam-dashboard',
+            },
+        },
+        {
+            name: 'Storefront Metrics',
+            component: 'dashboard/metric',
+            grid_options: { w: 12, h: 3 },
+            options: {
+                title: 'Storefront Metrics',
+                endpoint: 'storefront/int/v1/dashboard',
+            },
+        },
     ];
 
     universe.registerWidgets(availableWidgets);