adonisjs-pulse 0.0.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+# The MIT License
+
+Copyright (c) 2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# AdonisJS package starter kit
+
+> A boilerplate for creating AdonisJS packages
+
+This repo provides you with a starting point for creating AdonisJS packages. Of course, you can create a package from scratch with your folder structure and workflow. However, using this starter kit can speed up the process, as you have fewer decisions to make.
+
+## Setup
+
+- Clone the repo on your computer, or use `giget` to download this repo without the Git history.
+  ```sh
+  npx giget@latest gh:adonisjs/pkg-starter-kit
+  ```
+- Install dependencies.
+- Update the `package.json` file and define the `name`, `description`, `keywords`, and `author` properties.
+- The repo is configured with an MIT license. Feel free to change that if you are not publishing under the MIT license.
+
+## Folder structure
+
+The starter kit mimics the folder structure of the official packages. Feel free to rename files and folders as per your requirements.
+
+```
+├── providers
+├── src
+├── bin
+├── stubs
+├── configure.ts
+├── index.ts
+├── LICENSE.md
+├── package.json
+├── README.md
+├── tsconfig.json
+├── tsnode.esm.js
+```
+
+- The `configure.ts` file exports the `configure` hook to configure the package using the `node ace configure` command.
+- The `index.ts` file is the main entry point of the package.
+- The `tsnode.esm.js` file runs TypeScript code using TS-Node + SWC. Please read the code comment in this file to learn more.
+- The `bin` directory contains the entry point file to run Japa tests.
+- Learn more about [the `providers` directory](./providers/README.md).
+- Learn more about [the `src` directory](./src/README.md).
+- Learn more about [the `stubs` directory](./stubs/README.md).
+
+### File system naming convention
+
+We use `snake_case` naming conventions for the file system. The rule is enforced using ESLint. However, turn off the rule and use your preferred naming conventions.
+
+## Peer dependencies
+
+The starter kit has a peer dependency on `@adonisjs/core@6`. Since you are creating a package for AdonisJS, you must make it against a specific version of the framework core.
+
+If your package needs Lucid to be functional, you may install `@adonisjs/lucid` as a development dependency and add it to the list of `peerDependencies`.
+
+As a rule of thumb, packages installed in the user application should be part of the `peerDependencies` of your package and not the main dependency.
+
+For example, if you install `@adonisjs/core` as a main dependency, then essentially, you are importing a separate copy of `@adonisjs/core` and not sharing the one from the user application. Here is a great article explaining [peer dependencies](https://blog.bitsrc.io/understanding-peer-dependencies-in-javascript-dbdb4ab5a7be).
+
+## Published files
+
+Instead of publishing your repo's source code to npm, you must cherry-pick files and folders to publish only the required files.
+
+The cherry-picking uses the `files` property inside the `package.json` file. By default, we publish the following files and folders.
+
+```json
+{
+  "files": ["build/src", "build/providers", "build/stubs", "build/index.d.ts", "build/index.js", "build/configure.d.ts", "build/configure.js"]
+}
+```
+
+If you create additional folders or files, mention them inside the `files` array.
+
+## Exports
+
+[Node.js Subpath exports](https://nodejs.org/api/packages.html#subpath-exports) allows you to define the exports of your package regardless of the folder structure. This starter kit defines the following exports.
+
+```json
+{
+  "exports": {
+    ".": "./build/index.js",
+    "./types": "./build/src/types.js"
+  }
+}
+```
+
+- The dot `.` export is the main export.
+- The `./types` exports all the types defined inside the `./build/src/types.js` file (the compiled output).
+
+Feel free to change the exports as per your requirements.
+
+## Testing
+
+We configure the [Japa test runner](https://japa.dev/) with this starter kit. Japa is used in AdonisJS applications as well. Just run one of the following commands to execute tests.
+
+- `npm run test`: This command will first lint the code using ESlint and then run tests and report the test coverage using [c8](https://github.com/bcoe/c8).
+- `npm run quick:test`: Runs only the tests without linting or coverage reporting.
+
+The starter kit also has a Github workflow file to run tests using Github Actions. The tests are executed against `Node.js 20.x` and `Node.js 21.x` versions on both Linux and Windows. Feel free to edit the workflow file in the `.github/workflows` directory.
+
+## TypeScript workflow
+
+- The starter kit uses [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for compiling the TypeScript to JavaScript when publishing the package.
+- [TS-Node](https://typestrong.org/ts-node/) and [SWC](https://swc.rs/) are used to run tests without compiling the source code.
+- The `tsconfig.json` file is extended from [`@adonisjs/tsconfig`](https://github.com/adonisjs/tooling-config/tree/main/packages/typescript-config) and uses the `NodeNext` module system. Meaning the packages are written using ES modules.
+- You can perform type checking without compiling the source code using the `npm run type check` script.
+
+Feel free to explore the `tsconfig.json` file for all the configured options.
+
+## ESLint and Prettier setup
+
+The starter kit configures ESLint and Prettier
+using our [shared config](https://github.com/adonisjs/tooling-config/tree/main/packages).
+ESLint configuration is stored within the `eslint.config.js` file.
+Prettier configuration is stored within the `package.json` file.
+Feel free to change the configuration, use custom plugins, or remove both tools altogether.
+
+## Using Stale bot
+
+The [Stale bot](https://github.com/apps/stale) is a Github application that automatically marks issues and PRs as stale and closes after a specific duration of inactivity.
+
+Feel free to delete the `.github/stale.yml` and `.github/lock.yml` files if you decide not to use the Stale bot.

package/build/configure.d.ts

@@ -0,0 +1,2 @@
+import ConfigureCommand from '@adonisjs/core/commands/configure';
+export declare function configure(command: ConfigureCommand): Promise<void>;

package/build/configure.js

@@ -0,0 +1,47 @@
+/*
+|--------------------------------------------------------------------------
+| Configure hook
+|--------------------------------------------------------------------------
+|
+| The configure hook is called when someone runs "node ace configure <package>"
+| command. You are free to perform any operations inside this function to
+| configure the package.
+|
+| To make things easier, you have access to the underlying "ConfigureCommand"
+| instance and you can use codemods to modify the source files.
+|
+*/
+import { stubsRoot } from './stubs/main.js';
+export async function configure(command) {
+    const codemods = await command.createCodemods();
+    await codemods.makeUsingStub(stubsRoot, 'migration.stub', { time: Date.now() });
+    await codemods.makeUsingStub(stubsRoot, 'config.stub', {});
+    await codemods.defineEnvVariables({
+        PULSE_DB_CONNECTION: '',
+    });
+    await codemods.defineEnvValidations({
+        leadingComment: 'Variables for configuring the pulse package',
+        variables: {
+            PULSE_ENABLED: `Env.schema.boolean.optional()`,
+            PULSE_DB_CONNECTION: `Env.schema.string.optional()`,
+            PULSE_SLOW_REQUESTS_ENABLED: `Env.schema.boolean.optional()`,
+            PULSE_SLOW_REQUESTS_SAMPLE_RATE: `Env.schema.number.optional()`,
+            PULSE_SLOW_REQUESTS_THRESHOLD: `Env.schema.number.optional()`,
+            PULSE_SLOW_QUERIES_ENABLED: `Env.schema.boolean.optional()`,
+            PULSE_SLOW_QUERIES_SAMPLE_RATE: `Env.schema.number.optional()`,
+            PULSE_SLOW_QUERIES_THRESHOLD: `Env.schema.number.optional()`,
+            PULSE_EXCEPTIONS_ENABLED: `Env.schema.boolean.optional()`,
+            PULSE_EXCEPTIONS_SAMPLE_RATE: `Env.schema.number.optional()`,
+            PULSE_SERVERS_ENABLED: `Env.schema.boolean.optional()`,
+            PULSE_CACHE_INTERACTIONS_ENABLED: `Env.schema.boolean.optional()`,
+            PULSE_CACHE_INTERACTIONS_SAMPLE_RATE: `Env.schema.number.optional()`,
+        },
+    });
+    await codemods.updateRcFile((rcFile) => {
+        rcFile.addProvider('adonisjs-pulse/pulse_provider');
+    });
+    await codemods.installPackages([
+        { name: 'edge.js', isDevDependency: false },
+        { name: 'adonisjs-livewire', isDevDependency: false },
+    ]);
+}

package/build/index.d.ts

@@ -0,0 +1,5 @@
+export { configure } from './configure.js';
+export { Pulse } from './src/pulse.js';
+export { Entry } from './src/entry.js';
+export { Value } from './src/value.js';
+export * from './src/types.js';

package/build/index.js

@@ -0,0 +1,5 @@
+export { configure } from './configure.js';
+export { Pulse } from './src/pulse.js';
+export { Entry } from './src/entry.js';
+export { Value } from './src/value.js';
+export * from './src/types.js';

package/build/providers/pulse_provider.d.ts

@@ -0,0 +1,16 @@
+import type { ApplicationService } from '@adonisjs/core/types';
+import { Pulse } from '../src/pulse.js';
+declare module '@adonisjs/core/types' {
+    interface ContainerBindings {
+        pulse: Pulse;
+    }
+}
+export default class PulseProvider {
+    protected app: ApplicationService;
+    protected pulse: Pulse | null;
+    constructor(app: ApplicationService);
+    register(): void;
+    start(): Promise<void>;
+    ready(): Promise<void>;
+    shutdown(): Promise<void>;
+}

package/build/providers/pulse_provider.js

@@ -0,0 +1,64 @@
+import { Pulse } from '../src/pulse.js';
+import edge from 'edge.js';
+import { SlowQueries } from '../src/livewire/slow_queries.js';
+import { SlowRequests } from '../src/livewire/slow_requests.js';
+import { Servers } from '../src/livewire/servers.js';
+import { Exceptions } from '../src/livewire/exceptions.js';
+import { PeriodSelector } from '../src/livewire/period_selector.js';
+import { Cache } from '../src/livewire/cache.js';
+export default class PulseProvider {
+    app;
+    pulse = null;
+    constructor(app) {
+        this.app = app;
+    }
+    register() {
+        this.app.container.singleton('pulse', async () => {
+            const db = await this.app.container.make('lucid.db');
+            const config = this.app.config.get('pulse', {});
+            return new Pulse(db, config);
+        });
+    }
+    async start() {
+        const database = this.app.config.get('database', {});
+        for (const connectionName in database.connections) {
+            const connectionConfig = database.connections[connectionName];
+            connectionConfig.debug = true;
+        }
+        if (this.app.usingEdgeJS) {
+            edge.mount('pulse', new URL('../resources/views', import.meta.url));
+            const router = await this.app.container.make('router');
+            router.get('/pulse', async (ctx) => {
+                return ctx.view.render('pulse::dashboard');
+            });
+        }
+        const Livewire = await this.app.container.make('livewire');
+        Livewire.component('pulse::slow-queries', SlowQueries);
+        Livewire.component('pulse::slow-requests', SlowRequests);
+        Livewire.component('pulse::servers', Servers);
+        Livewire.component('pulse::exceptions', Exceptions);
+        Livewire.component('pulse::period-selector', PeriodSelector);
+        Livewire.component('pulse::cache', Cache);
+    }
+    async ready() {
+        const pulse = await this.app.container.make('pulse');
+        this.pulse = pulse;
+        const config = pulse.getConfig();
+        if (!config.enabled) {
+            return;
+        }
+        await pulse.registerRecorders(this.app);
+        pulse.startIngesting();
+    }
+    async shutdown() {
+        if (this.pulse) {
+            for (const recorder of this.pulse.getRecorders()) {
+                if ('stop' in recorder && typeof recorder.stop === 'function') {
+                    recorder.stop();
+                }
+            }
+            this.pulse.stopIngesting();
+            await this.pulse.flush();
+        }
+    }
+}

package/build/resources/views/components/card-header.edge

@@ -0,0 +1,30 @@
+<header class="flex flex-wrap justify-between items-center gap-4 mb-3 @md:mb-6">
+  <div class="flex-1 basis-0 flex-grow-[10000] max-w-full">
+    <div class="flex overflow-hidden gap-2 items-start">
+      @if($slots.icon)
+        <div class="[&>svg]:flex-shrink-0 [&>svg]:w-6 [&>svg]:h-6 [&>svg]:stroke-gray-400 [&>svg]:dark:stroke-gray-600">
+          {{{ await $slots.icon() }}}
+        </div>
+      @end
+      <hgroup class="flex flex-wrap items-baseline gap-x-2 overflow-hidden">
+        <h2 class="text-base font-bold text-gray-600 dark:text-gray-300 truncate" title="{{ title ?? '' }}">
+          @if($slots.title)
+            {{{ await $slots.title() }}}
+          @else
+            {{ title ?? '' }}
+          @end
+        </h2>
+        @if(details)
+          <p class="text-gray-400 dark:text-gray-600 font-medium truncate"><small class="text-xs">{{ details }}</small></p>
+        @end
+      </hgroup>
+    </div>
+  </div>
+  @if($slots.actions)
+    <div class="flex flex-grow">
+      <div class="w-full flex items-center gap-4">
+        {{{ await $slots.actions() }}}
+      </div>
+    </div>
+  @end
+</header>

package/build/resources/views/components/card.edge

@@ -0,0 +1,8 @@
+@let(colsValue = cols ?? 6)
+@let(rowsValue = rows ?? 1)
+
+<div
+  class="@container flex flex-col p-3 sm:p-6 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-xl shadow-sm ring-1 ring-gray-900/5 col-span-full lg:col-span-{{ colsValue }} row-span-{{ rowsValue }}"
+>
+  {{{ await $slots.main() }}}
+</div>

package/build/resources/views/components/no-results.edge

@@ -0,0 +1,3 @@
+<div class="flex items-center justify-center py-8 text-sm text-gray-500 dark:text-gray-400">
+  {{ message ?? 'No results' }}
+</div>

package/build/resources/views/components/pulse.edge

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pulse - Application Performance</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            pulse: {
+              bg: 'rgb(17, 24, 39)',
+              card: 'rgb(31, 41, 55)',
+              border: 'rgb(55, 65, 81)',
+            }
+          }
+        }
+      }
+    }
+  </script>
+  <style type="text/tailwindcss">
+    @layer components {
+      .pulse-card {
+        @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
+      }
+      .pulse-scroll {
+        @apply overflow-y-auto;
+        scrollbar-width: thin;
+        scrollbar-color: rgb(75 85 99) transparent;
+      }
+      .pulse-scroll::-webkit-scrollbar {
+        width: 6px;
+      }
+      .pulse-scroll::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .pulse-scroll::-webkit-scrollbar-thumb {
+        background-color: rgb(75 85 99);
+        border-radius: 3px;
+      }
+    }
+  </style>
+  @livewireStyles()
+</head>
+<body class="bg-gray-100 dark:bg-gray-950 min-h-screen antialiased">
+  <div class="mx-auto max-w-screen-2xl p-4 lg:p-6">
+    <header class="mb-6 flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          Pulse
+        </h1>
+        @livewire('pulse::period-selector')
+      </div>
+      <div class="flex items-center gap-2">
+        @!component('pulse::components/theme-switcher')
+      </div>
+    </header>
+
+    <main class="grid grid-cols-12 gap-4 lg:gap-6">
+      {{{ await $slots.main() }}}
+    </main>
+  </div>
+
+  @livewireScripts()
+  <script>
+    document.addEventListener('alpine:init', () => {
+      Alpine.data('pulseChart', () => ({
+        init() {
+          this.$watch('data', () => this.render())
+        },
+        render() {}
+      }))
+    })
+  </script>
+</body>
+</html>

package/build/resources/views/components/scroll.edge

@@ -0,0 +1,3 @@
+<div class="pulse-scroll flex-1 overflow-y-auto {{ $props.class ?? '' }}">
+  {{{ await $slots.main() }}}
+</div>

package/build/resources/views/components/table.edge

@@ -0,0 +1,3 @@
+<table class="min-w-full">
+  {{{ await $slots.main() }}}
+</table>

package/build/resources/views/components/td.edge

@@ -0,0 +1,4 @@
+@let(classValue = state.class ?? '')
+<td class="first:rounded-l-md last:rounded-r-md text-sm bg-gray-50 dark:bg-gray-800/50 first:pl-3 last:pr-3 px-1 @sm:px-3 py-3 {{ classValue }}">
+  {{{ await $slots.main() }}}
+</td>

package/build/resources/views/components/th.edge

@@ -0,0 +1,4 @@
+@let(classValue = state.class ?? '')
+<th class="text-xs text-gray-500 uppercase py-2 first:pl-3 last:pr-3 px-1 @sm:px-3 text-left {{ classValue }}">
+  {{{ await $slots.main() }}}
+</th>

package/build/resources/views/components/thead.edge

@@ -0,0 +1,3 @@
+<thead class="sticky z-10 top-0 bg-white dark:bg-gray-900">
+  {{{ await $slots.main() }}}
+</thead>

package/build/resources/views/components/theme-switcher.edge

@@ -0,0 +1,48 @@
+<div x-data="themeSwitcher()" class="relative">
+  <button
+    type="button"
+    @click="toggle()"
+    class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+    :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
+  >
+    <template x-if="theme === 'dark'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
+      </svg>
+    </template>
+    <template x-if="theme === 'light'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+      </svg>
+    </template>
+  </button>
+</div>
+
+<script>
+  function themeSwitcher() {
+    return {
+      theme: localStorage.getItem('pulse-theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+      init() {
+        this.applyTheme()
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+          if (!localStorage.getItem('pulse-theme')) {
+            this.theme = e.matches ? 'dark' : 'light'
+            this.applyTheme()
+          }
+        })
+      },
+      toggle() {
+        this.theme = this.theme === 'dark' ? 'light' : 'dark'
+        localStorage.setItem('pulse-theme', this.theme)
+        this.applyTheme()
+      },
+      applyTheme() {
+        if (this.theme === 'dark') {
+          document.documentElement.classList.add('dark')
+        } else {
+          document.documentElement.classList.remove('dark')
+        }
+      }
+    }
+  }
+</script>

package/build/resources/views/dashboard.edge

@@ -0,0 +1,7 @@
+<x-pulse::pulse>
+  <livewire:pulse::servers cols="full" />
+  <livewire:pulse::slow-queries cols="6" />
+  <livewire:pulse::cache cols="6" />
+  <livewire:pulse::slow-requests cols="6" />
+  <livewire:pulse::exceptions cols="6" />
+</x-pulse::pulse>

package/build/resources/views/livewire/cache.edge

@@ -0,0 +1,111 @@
+<x-pulse::card :cols="cols ?? 4" :rows="rows ?? 2">
+  <x-pulse::card-header title="Cache" :details="'past ' + period">
+    <x-slot name="icon">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+      </svg>
+    </x-slot>
+  </x-pulse::card-header>
+
+  <x-pulse::scroll>
+    @if(allCacheInteractions.hits === 0 && allCacheInteractions.misses === 0)
+      <x-pulse::no-results message="No cache interactions" />
+    @else
+      <div class="flex flex-col gap-6">
+        <div class="grid grid-cols-3 gap-3 text-center">
+          <div class="flex flex-col justify-center @sm:block">
+            <span class="text-xl uppercase font-bold text-gray-700 dark:text-gray-300 tabular-nums">
+              @if(config.sampleRate < 1)
+                <span title="Sample rate: {{ config.sampleRate }}, Raw value: {{ formatNumber(allCacheInteractions.hits) }}">~{{ formatNumber(Math.round(allCacheInteractions.hits * (1 / config.sampleRate))) }}</span>
+              @else
+                {{ formatNumber(allCacheInteractions.hits) }}
+              @end
+            </span>
+            <span class="text-xs uppercase font-bold text-gray-500 dark:text-gray-400">
+              Hits
+            </span>
+          </div>
+          <div class="flex flex-col justify-center @sm:block">
+            <span class="text-xl uppercase font-bold text-gray-700 dark:text-gray-300 tabular-nums">
+              @if(config.sampleRate < 1)
+                <span title="Sample rate: {{ config.sampleRate }}, Raw value: {{ formatNumber(allCacheInteractions.misses) }}">~{{ formatNumber(Math.round(allCacheInteractions.misses * (1 / config.sampleRate))) }}</span>
+              @else
+                {{ formatNumber(allCacheInteractions.misses) }}
+              @end
+            </span>
+            <span class="text-xs uppercase font-bold text-gray-500 dark:text-gray-400">
+              Misses
+            </span>
+          </div>
+          <div class="flex flex-col justify-center @sm:block">
+            <span class="text-xl uppercase font-bold text-gray-700 dark:text-gray-300 tabular-nums">
+              @if(allCacheInteractions.hits + allCacheInteractions.misses > 0)
+                {{ (Math.floor(allCacheInteractions.hits / (allCacheInteractions.hits + allCacheInteractions.misses) * 10000) / 100).toFixed(1) }}%
+              @else
+                0%
+              @end
+            </span>
+            <span class="text-xs uppercase font-bold text-gray-500 dark:text-gray-400">
+              Hit Rate
+            </span>
+          </div>
+        </div>
+        <div>
+          <x-pulse::table>
+            <colgroup>
+              <col width="100%" />
+              <col width="0%" />
+              <col width="0%" />
+              <col width="0%" />
+            </colgroup>
+            <x-pulse::thead>
+              <tr>
+                <x-pulse::th>Key</x-pulse::th>
+                <x-pulse::th class="text-right">Hits</x-pulse::th>
+                <x-pulse::th class="text-right">Misses</x-pulse::th>
+                <x-pulse::th class="text-right whitespace-nowrap">Hit Rate</x-pulse::th>
+              </tr>
+            </x-pulse::thead>
+            <tbody>
+              @each(interaction in cacheKeyInteractions.slice(0, 100))
+                <tr class="h-2 first:h-0"></tr>
+                <tr>
+                  <x-pulse::td class="max-w-[1px]">
+                    <code class="block text-xs text-gray-900 dark:text-gray-100 truncate" title="{{ interaction.key }}">
+                      {{ interaction.key }}
+                    </code>
+                  </x-pulse::td>
+                  <x-pulse::td class="text-right tabular-nums text-gray-700 dark:text-gray-300 font-bold whitespace-nowrap">
+                    @if(config.sampleRate < 1)
+                      <span title="Sample rate: {{ config.sampleRate }}, Raw value: {{ formatNumber(interaction.hits) }}">~{{ formatNumber(Math.round(interaction.hits * (1 / config.sampleRate))) }}</span>
+                    @else
+                      {{ formatNumber(interaction.hits) }}
+                    @end
+                  </x-pulse::td>
+                  <x-pulse::td class="text-right tabular-nums text-gray-700 dark:text-gray-300 font-bold whitespace-nowrap">
+                    @if(config.sampleRate < 1)
+                      <span title="Sample rate: {{ config.sampleRate }}, Raw value: {{ formatNumber(interaction.misses) }}">~{{ formatNumber(Math.round(interaction.misses * (1 / config.sampleRate))) }}</span>
+                    @else
+                      {{ formatNumber(interaction.misses) }}
+                    @end
+                  </x-pulse::td>
+                  <x-pulse::td class="text-right tabular-nums text-gray-700 dark:text-gray-300 font-bold whitespace-nowrap">
+                    @if(interaction.hits + interaction.misses > 0)
+                      {{ (Math.floor(interaction.hits / (interaction.hits + interaction.misses) * 10000) / 100).toFixed(1) }}%
+                    @else
+                      0%
+                    @end
+                  </x-pulse::td>
+                </tr>
+              @end
+            </tbody>
+          </x-pulse::table>
+
+          @if(cacheKeyInteractions.length > 100)
+            <div class="mt-2 text-xs text-gray-400 text-center">Limited to 100 entries</div>
+          @end
+        </div>
+      </div>
+    @end
+  </x-pulse::scroll>
+</x-pulse::card>

package/build/resources/views/livewire/exceptions.edge

@@ -0,0 +1,48 @@
+<x-pulse::card :cols="cols ?? 6" :rows="rows ?? 1">
+  <x-pulse::card-header title="Exceptions" :details="'past ' + period">
+    <x-slot name="icon">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
+      </svg>
+    </x-slot>
+  </x-pulse::card-header>
+
+  <x-pulse::scroll>
+    @if(exceptions && exceptions.length > 0)
+      <x-pulse::table>
+        <colgroup>
+          <col width="100%" />
+          <col width="0%" />
+        </colgroup>
+        <x-pulse::thead>
+          <tr>
+            <x-pulse::th>Type</x-pulse::th>
+            <x-pulse::th class="text-right">Count</x-pulse::th>
+          </tr>
+        </x-pulse::thead>
+        <tbody>
+          @each(exception in exceptions)
+            <tr class="h-2 first:h-0"></tr>
+            <tr>
+              <x-pulse::td class="max-w-[1px]">
+                <div class="truncate font-medium text-red-600 dark:text-red-400" title="{{ exception.class }}">
+                  {{ exception.class }}
+                </div>
+                @if(exception.location)
+                  <div class="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400" title="{{ exception.location }}">
+                    {{ exception.location }}
+                  </div>
+                @end
+              </x-pulse::td>
+              <x-pulse::td class="text-right tabular-nums text-gray-700 dark:text-gray-300 font-bold whitespace-nowrap">
+                {{ formatNumber(exception.count) }}
+              </x-pulse::td>
+            </tr>
+          @end
+        </tbody>
+      </x-pulse::table>
+    @else
+      <x-pulse::no-results message="No exceptions" />
+    @end
+  </x-pulse::scroll>
+</x-pulse::card>