Connector counts

Author: simonredfern

src/lib/components/OpeyChat.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { ShieldUserIcon } from '@lucide/svelte';
 	import { Tooltip, Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
 	import { createLogger } from '$lib/utils/logger';
 
@@ -256,11 +255,6 @@
 		}
 	});
 
-	let authPipOpenState = $state(false);
-
-	// async function formatAuthStatusPip(session: SessionSnapshot, consentInfo?: OBPConsentInfo): {
-	// 	const
-	// }
 
 	async function sendMessage(text: string) {
 		if (!text.trim()) return;
@@ -539,47 +533,53 @@
 
 {#snippet statusPips(session: SessionSnapshot, consentInfo?: OBPConsentInfo)}
 	{#if options.displayConnectionPips}
-		<div class="flex flex-col items-center">
+		<div class="flex flex-row items-center gap-1.5">
 			<!-- Connection Pip with Tooltip -->
-			<Tooltip positioning={{ placement: 'top' }}>
+			<Tooltip>
 				<Tooltip.Trigger>
-					<div class="badge-icon {connectionPipColor} h-3 w-3">
-						<ShieldUserIcon size={12} />
-					</div>
+					<div class="h-2 w-2 rounded-full {connectionPipColor} cursor-pointer transition-all hover:scale-125"></div>
 				</Tooltip.Trigger>
-				<Tooltip.Content>Opey Connection Status: {connectionStatusString}</Tooltip.Content>
+				<Portal>
+					<Tooltip.Positioner class="z-10">
+						<Tooltip.Content class="card bg-primary-200-800 text-xs p-2">
+							Opey Connection Status: {connectionStatusString}
+							<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-primary-200-800)]">
+								<Tooltip.ArrowTip />
+							</Tooltip.Arrow>
+						</Tooltip.Content>
+					</Tooltip.Positioner>
+				</Portal>
 			</Tooltip>
-			<!-- Authentication Pip with Tooltip -->
-			<Tooltip open={authPipOpenState}>
+			<!-- Authentication/Consent Pip with Tooltip -->
+			<Tooltip>
 				<Tooltip.Trigger>
-					<div class="badge-icon {authPipColor} h-3 w-3">
-						<ShieldUserIcon size={12} />
-					</div>
+					<a
+						href="/user#opey-consent"
+						class="h-2 w-2 rounded-full {authPipColor} cursor-pointer transition-all hover:scale-125 block"
+						aria-label="View Opey consent"
+					></a>
 				</Tooltip.Trigger>
-				<Tooltip.Content>
-					{#if session.status === 'loading'}
-						Authenticating...
-					{:else if session.status === 'error'}
-						Error during authentication: {session.error}
-					{:else if session.isAuthenticated}
-						<h1 class="font-bold text-success-500">Authenticated</h1>
-						{#if consentInfo}
-							<br />
-							Consent ID:
-							<a href="/user#opey-consent" aria-label="view opey consent"
-								>{consentInfo.consent_id}</a
-							>
-						{/if}
-					{:else}
-						Not Authenticated
-					{/if}
-				</Tooltip.Content>
+				<Portal>
+					<Tooltip.Positioner class="z-10">
+						<Tooltip.Content class="card bg-primary-200-800 text-xs p-2">
+							{#if session.status === 'loading'}
+								Authenticating...
+							{:else if session.status === 'error'}
+								Error: {session.error}
+							{:else if session.isAuthenticated && consentInfo}
+								Click to view consent
+							{:else if session.isAuthenticated}
+								Authenticated (no consent info)
+							{:else}
+								Not Authenticated
+							{/if}
+							<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-primary-200-800)]">
+								<Tooltip.ArrowTip />
+							</Tooltip.Arrow>
+						</Tooltip.Content>
+					</Tooltip.Positioner>
+				</Portal>
 			</Tooltip>
-			<!-- {#if !session.isAuthenticated}
-				<button class="btn btn-sm btn-primary" onclick={upgradeSession} disabled={session.status === 'loading'}>
-					Log in to connect banking data
-				</button>
-			{/if} -->
 		</div>
 	{/if}
 {/snippet}

src/lib/config/navigation.ts

@@ -29,6 +29,7 @@ import {
   CircleHelp,
   Rocket,
   Banknote,
+  Hash,
 } from "@lucide/svelte";
 import { env } from "$env/dynamic/public";
 
@@ -179,6 +180,11 @@ function buildMetricsItems(): NavigationItem[] {
       label: "Connector Metrics",
       iconComponent: Plug,
     },
+    {
+      href: "/connector-counts",
+      label: "Connector Counts",
+      iconComponent: Hash,
+    },
   ];
 
   return items;
@@ -430,7 +436,7 @@ export const navSections: NavigationSection[] = [
   { id: "my-account", label: "My Account", iconComponent: User, items: myAccountItems, basePaths: ["/user"] },
   { id: "system", label: "System", iconComponent: Server, items: systemItems, basePaths: ["/system"] },
   { id: "integration", label: "Integration", iconComponent: Plug, items: integrationItems, basePaths: ["/integration"] },
-  { id: "metrics", label: "Metrics", iconComponent: BarChart3, items: metricsItems, basePaths: ["/metrics", "/aggregate-metrics", "/connector-metrics"] },
+  { id: "metrics", label: "Metrics", iconComponent: BarChart3, items: metricsItems, basePaths: ["/metrics", "/aggregate-metrics", "/connector-metrics", "/connector-counts"] },
   { id: "abac", label: "ABAC", iconComponent: Lock, items: abacItems, basePaths: ["/abac"] },
   { id: "products", label: "Products", iconComponent: Package, items: productsItems, basePaths: ["/products"] },
   { id: "rbac", label: "RBAC", iconComponent: Shield, items: rbacItems, basePaths: ["/rbac"] },

src/routes/(protected)/connector-counts/+page.server.ts

@@ -0,0 +1,27 @@
+import { createLogger } from "$lib/utils/logger";
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+const logger = createLogger("ConnectorCountsPageServer");
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const session = locals.session;
+
+  if (!session?.data?.user) {
+    throw error(401, "Unauthorized");
+  }
+
+  const userEntitlements = (session.data.user as any)?.entitlements?.list || [];
+  const requiredRoles = [
+    {
+      role: "CanGetConnectorMetrics",
+      description: "View connector call counts",
+      action: "view connector call counts",
+    },
+  ];
+
+  return {
+    userEntitlements,
+    requiredRoles,
+  };
+};