mirror of
https://github.com/okieselbach/AutopilotMonitor.git
synced 2026-10-25 05:00:07 +00:00
enhanced usage metrics
This commit is contained in:
@@ -1 +1 @@
|
||||
374
|
||||
375
|
||||
|
||||
+8
-1
@@ -37,7 +37,14 @@ namespace AutopilotMonitor.Functions.Functions.Metrics
|
||||
{
|
||||
// Authentication + GalacticAdminOnly authorization enforced by PolicyEnforcementMiddleware
|
||||
|
||||
var metrics = await _usageMetricsService.ComputeUsageMetricsAsync();
|
||||
// Optional tenantId query parameter: when provided, return tenant-specific metrics
|
||||
var tenantId = req.Url.Query?.Contains("tenantId=") == true
|
||||
? System.Web.HttpUtility.ParseQueryString(req.Url.Query).Get("tenantId")
|
||||
: null;
|
||||
|
||||
var metrics = !string.IsNullOrEmpty(tenantId)
|
||||
? await _usageMetricsService.ComputeTenantUsageMetricsAsync(tenantId)
|
||||
: await _usageMetricsService.ComputeUsageMetricsAsync();
|
||||
|
||||
var response = req.CreateResponse(HttpStatusCode.OK);
|
||||
await response.WriteAsJsonAsync(metrics);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useTenant } from '../../contexts/TenantContext';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
@@ -9,6 +9,11 @@ import { ProtectedRoute } from '../../components/ProtectedRoute';
|
||||
import { API_BASE_URL } from '@/lib/config';
|
||||
import { authenticatedFetch, TokenExpiredError } from "@/lib/authenticatedFetch";
|
||||
|
||||
interface TenantInfo {
|
||||
tenantId: string;
|
||||
domainName: string;
|
||||
}
|
||||
|
||||
interface SessionMetrics {
|
||||
total: number;
|
||||
today: number;
|
||||
@@ -74,13 +79,54 @@ interface PlatformUsageMetrics {
|
||||
export default function UsageMetricsPage() {
|
||||
const router = useRouter();
|
||||
const { tenantId } = useTenant();
|
||||
const { getAccessToken } = useAuth();
|
||||
const { getAccessToken, user } = useAuth();
|
||||
const { addNotification } = useNotifications();
|
||||
const [metrics, setMetrics] = useState<PlatformUsageMetrics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const fetchMetrics = async (showRefreshing = false) => {
|
||||
// Galactic admin mode
|
||||
const [galacticAdminMode] = useState(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('galacticAdminMode') === 'true';
|
||||
}
|
||||
return false;
|
||||
});
|
||||
const [tenants, setTenants] = useState<TenantInfo[]>([]);
|
||||
const [selectedTenantId, setSelectedTenantId] = useState<string>('');
|
||||
|
||||
// Fetch tenant list for galactic admin
|
||||
useEffect(() => {
|
||||
if (!galacticAdminMode || !user?.isGalacticAdmin) return;
|
||||
const fetchTenants = async () => {
|
||||
try {
|
||||
const response = await authenticatedFetch(`${API_BASE_URL}/api/config/all`, getAccessToken);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setTenants(data.map((t: { tenantId: string; domainName: string }) => ({
|
||||
tenantId: t.tenantId,
|
||||
domainName: t.domainName || '',
|
||||
})));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching tenant list:', err);
|
||||
}
|
||||
};
|
||||
fetchTenants();
|
||||
}, [galacticAdminMode, user?.isGalacticAdmin]);
|
||||
|
||||
// Set default selected tenant once tenantId is available
|
||||
useEffect(() => {
|
||||
if (tenantId && !selectedTenantId) {
|
||||
setSelectedTenantId(tenantId);
|
||||
}
|
||||
}, [tenantId]);
|
||||
|
||||
const isGalacticOverride = galacticAdminMode && user?.isGalacticAdmin && selectedTenantId && selectedTenantId !== tenantId;
|
||||
const effectiveTenantId = (galacticAdminMode && user?.isGalacticAdmin && selectedTenantId) ? selectedTenantId : tenantId;
|
||||
|
||||
const fetchMetrics = useCallback(async (showRefreshing = false) => {
|
||||
if (!effectiveTenantId) return;
|
||||
try {
|
||||
if (showRefreshing) {
|
||||
setRefreshing(true);
|
||||
@@ -88,7 +134,12 @@ export default function UsageMetricsPage() {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
const response = await authenticatedFetch(`${API_BASE_URL}/api/metrics/usage?tenantId=${tenantId}`, getAccessToken);
|
||||
// Galactic admin viewing another tenant → use galactic endpoint
|
||||
const url = isGalacticOverride
|
||||
? `${API_BASE_URL}/api/galactic/metrics/usage?tenantId=${effectiveTenantId}`
|
||||
: `${API_BASE_URL}/api/metrics/usage?tenantId=${effectiveTenantId}`;
|
||||
|
||||
const response = await authenticatedFetch(url, getAccessToken);
|
||||
|
||||
if (!response.ok) {
|
||||
addNotification('error', 'Backend Error', `Failed to load usage metrics: ${response.statusText}`, 'usage-metrics-fetch-error');
|
||||
@@ -108,12 +159,19 @@ export default function UsageMetricsPage() {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
}, [effectiveTenantId, isGalacticOverride, getAccessToken, addNotification]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!tenantId) return;
|
||||
if (!effectiveTenantId) return;
|
||||
fetchMetrics();
|
||||
}, [tenantId]);
|
||||
}, [effectiveTenantId]);
|
||||
|
||||
// Re-fetch when tenant selection changes
|
||||
const handleTenantChange = (newTenantId: string) => {
|
||||
setSelectedTenantId(newTenantId);
|
||||
};
|
||||
|
||||
const selectedTenantName = tenants.find(t => t.tenantId === selectedTenantId)?.domainName;
|
||||
|
||||
const formatDuration = (minutes: number) => {
|
||||
if (minutes < 60) {
|
||||
@@ -147,6 +205,15 @@ export default function UsageMetricsPage() {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{galacticAdminMode && user?.isGalacticAdmin && (
|
||||
<div className="bg-purple-700 text-white text-sm px-4 py-2 flex items-center justify-center space-x-2">
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="font-medium">Galactic Admin View</span>
|
||||
<span className="text-purple-300">— access to all tenants</span>
|
||||
</div>
|
||||
)}
|
||||
<header className="bg-white shadow">
|
||||
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -160,6 +227,9 @@ export default function UsageMetricsPage() {
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Usage Metrics</h1>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{isGalacticOverride && selectedTenantName
|
||||
? `Tenant: ${selectedTenantName} · `
|
||||
: ''}
|
||||
Computed at {formatTimestamp(metrics.computedAt)} in {metrics.computeDurationMs}ms
|
||||
{metrics.fromCache && (
|
||||
<span className="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">
|
||||
@@ -169,16 +239,36 @@ export default function UsageMetricsPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => fetchMetrics(true)}
|
||||
disabled={refreshing}
|
||||
className="px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<svg className={`h-5 w-5 ${refreshing ? 'animate-spin' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<span>{refreshing ? 'Refreshing...' : 'Refresh'}</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
{galacticAdminMode && user?.isGalacticAdmin && tenants.length > 0 && (
|
||||
<>
|
||||
<label className="text-sm text-gray-500 hidden sm:inline">Tenant:</label>
|
||||
<select
|
||||
value={selectedTenantId}
|
||||
onChange={(e) => handleTenantChange(e.target.value)}
|
||||
className="text-sm border border-gray-300 rounded-md px-2 py-1.5 max-w-[220px] sm:max-w-xs"
|
||||
>
|
||||
{tenants.map((t) => (
|
||||
<option key={t.tenantId} value={t.tenantId}>
|
||||
{t.domainName
|
||||
? `${t.domainName} (${t.tenantId.substring(0, 8)}...)`
|
||||
: t.tenantId}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={() => fetchMetrics(true)}
|
||||
disabled={refreshing}
|
||||
className="px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<svg className={`h-5 w-5 ${refreshing ? 'animate-spin' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<span>{refreshing ? 'Refreshing...' : 'Refresh'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user