Oda/managing-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update front

Browse Source
This commit is contained in:
cryptooda
2025-10-10 02:25:50 +07:00
parent de70674c0e
commit 5a91c0fdd1
1 changed files with 111 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/Managing.WebApp/src/pages/settingsPage/sqlmonitoring/sqlMonitoring.tsx
View File

@@ -87,20 +87,8 @@ const SqlMonitoring: React.FC = () => {
{
Header: 'Repository',
accessor: 'repository',
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Method',
accessor: 'method',
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Query Pattern',
accessor: 'queryPattern',
Cell: ({ value }: { value: string }) => (
<div className="max-w-xs truncate" title={value}>
<div className="text-xs sm:text-sm truncate max-w-16 sm:max-w-none" title={value}>
{value}
</div>
),
@@ -108,24 +96,46 @@ const SqlMonitoring: React.FC = () => {
disableFilters: true,
},
{
Header: 'Executions',
Header: 'Method',
accessor: 'method',
Cell: ({ value }: { value: string }) => (
<div className="text-xs sm:text-sm truncate max-w-16 sm:max-w-none" title={value}>
{value}
</div>
),
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Query',
accessor: 'queryPattern',
Cell: ({ value }: { value: string }) => (
<div className="max-w-20 sm:max-w-xs truncate text-xs font-mono" title={value}>
{value}
</div>
),
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Count',
accessor: 'executionCount',
Cell: ({ value }: { value: number }) => {
const numValue = Number(value) || 0
return (
<span className="badge badge-primary">{numValue}</span>
<span className="badge badge-xs sm:badge-sm badge-primary">{numValue}</span>
)
},
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Per Minute',
Header: '/Min',
accessor: 'executionsPerMinute',
Cell: ({ value }: { value: number }) => {
const numValue = Number(value) || 0
return (
<span className={`badge ${numValue > 20 ? 'badge-warning' : 'badge-info'}`}>
<span className={`badge badge-xs sm:badge-sm ${numValue > 20 ? 'badge-warning' : 'badge-info'}`}>
{numValue.toFixed(1)}
</span>
)
@@ -134,12 +144,12 @@ const SqlMonitoring: React.FC = () => {
disableFilters: true,
},
{
Header: 'Avg Time (ms)',
Header: 'Time (ms)',
accessor: 'averageExecutionTime',
Cell: ({ value }: { value: number }) => {
const numValue = Number(value) || 0
return (
<span className={`badge ${numValue > 1000 ? 'badge-error' : numValue > 500 ? 'badge-warning' : 'badge-success'}`}>
<span className={`badge badge-xs sm:badge-sm ${numValue > 1000 ? 'badge-error' : numValue > 500 ? 'badge-warning' : 'badge-success'}`}>
{numValue.toFixed(0)}
</span>
)
@@ -151,19 +161,8 @@ const SqlMonitoring: React.FC = () => {
Header: 'Status',
accessor: 'isActive',
Cell: ({ value }: { value: boolean }) => (
<span className={`badge ${value ? 'badge-success' : 'badge-neutral'}`}>
{value ? 'Active' : 'Inactive'}
</span>
),
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Last Execution',
accessor: 'lastExecution',
Cell: ({ value }: { value: string }) => (
<span className="text-xs">
{value ? new Date(value).toLocaleString() : 'N/A'}
<span className={`badge badge-xs sm:badge-sm ${value ? 'badge-success' : 'badge-neutral'}`}>
{value ? '✓' : '✗'}
</span>
),
disableSortBy: true,
@@ -180,7 +179,7 @@ const SqlMonitoring: React.FC = () => {
Header: 'Query Pattern',
accessor: 'queryPattern',
Cell: ({ value }: { value: string }) => (
<div className="max-w-md truncate font-mono text-xs" title={value}>
<div className="max-w-32 sm:max-w-md truncate font-mono text-xs" title={value}>
{value}
</div>
),
@@ -188,28 +187,17 @@ const SqlMonitoring: React.FC = () => {
disableFilters: true,
},
{
Header: 'Execution Count',
Header: 'Count',
accessor: 'executionCount',
Cell: ({ value }: { value: number }) => {
const numValue = Number(value) || 0
return (
<span className="badge badge-secondary">{numValue}</span>
<span className="badge badge-xs sm:badge-sm badge-secondary">{numValue}</span>
)
},
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Timestamp',
accessor: 'timestamp',
Cell: ({ value }: { value: string }) => (
<span className="text-xs">
{new Date(value).toLocaleString()}
</span>
),
disableSortBy: true,
disableFilters: true,
},
],
[]
)
@@ -222,7 +210,7 @@ const SqlMonitoring: React.FC = () => {
accessor: 'severity',
Cell: ({ value }: { value: string }) => (
<span
className={`badge ${
className={`badge badge-xs sm:badge-sm ${
value === 'Critical' || value === 'Error'
? 'badge-error'
: value === 'Warning'
@@ -230,39 +218,42 @@ const SqlMonitoring: React.FC = () => {
: 'badge-info'
}`}
>
{value}
{value === 'Critical' ? '!' : value === 'Error' ? 'E' : value === 'Warning' ? 'W' : 'I'}
</span>
),
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Type',
accessor: 'type',
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Repository',
accessor: 'repository',
Cell: ({ value }: { value: string }) => (
<div className="text-xs sm:text-sm truncate max-w-16 sm:max-w-none" title={value}>
{value}
</div>
),
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Method',
accessor: 'method',
Cell: ({ value }: { value: string }) => (
<div className="text-xs sm:text-sm truncate max-w-16 sm:max-w-none" title={value}>
{value}
</div>
),
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Message',
accessor: 'message',
disableSortBy: true,
disableFilters: true,
},
{
Header: 'Timestamp',
accessor: 'timestamp',
Cell: ({ value }: { value: string }) => (
<div className="text-xs sm:text-sm truncate max-w-32 sm:max-w-none" title={value}>
{value}
</div>
),
disableSortBy: true,
disableFilters: true,
},
@@ -271,16 +262,16 @@ const SqlMonitoring: React.FC = () => {
)
return (
<div className="container mx-auto space-y-6">
<div className="container mx-auto space-y-3 sm:space-y-6 px-2 sm:px-4">
{/* Header */}
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<h2 className="text-2xl font-bold">SQL Monitoring Dashboard</h2>
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-4">
<h2 className="text-xl sm:text-2xl font-bold">SQL Monitoring</h2>
<button
className="btn btn-outline btn-sm"
className="btn btn-outline btn-xs sm:btn-sm"
onClick={() => clearTrackingMutation.mutate()}
disabled={clearTrackingMutation.isPending}
>
{clearTrackingMutation.isPending ? 'Clearing...' : 'Clear Tracking Data'}
{clearTrackingMutation.isPending ? 'Clearing...' : 'Clear Data'}
</button>
</div>
@@ -289,73 +280,73 @@ const SqlMonitoring: React.FC = () => {
<progress className="progress progress-primary w-56"></progress>
</div>
) : (
<div className="space-y-6">
<div className="space-y-3 sm:space-y-6">
{/* Overview Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="stat bg-base-200 rounded-lg">
<div className="stat-title text-sm">Total Tracked Queries</div>
<div className="stat-value text-lg text-primary">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
<div className="stat bg-base-200 rounded-lg p-2 sm:p-4">
<div className="stat-title text-xs sm:text-sm">Total Queries</div>
<div className="stat-value text-sm sm:text-lg text-primary">
{statistics?.totalTrackedQueries || 0}
</div>
<div className="stat-desc text-xs">All time</div>
<div className="stat-desc text-xs hidden sm:block">All time</div>
</div>
<div className="stat bg-base-200 rounded-lg">
<div className="stat-title text-sm">Active Queries</div>
<div className="stat-value text-lg text-secondary">
<div className="stat bg-base-200 rounded-lg p-2 sm:p-4">
<div className="stat-title text-xs sm:text-sm">Active</div>
<div className="stat-value text-sm sm:text-lg text-secondary">
{statistics?.activeQueries || 0}
</div>
<div className="stat-desc text-xs">Currently monitored</div>
<div className="stat-desc text-xs hidden sm:block">Currently monitored</div>
</div>
<div className="stat bg-base-200 rounded-lg">
<div className="stat-title text-sm">Total Alerts</div>
<div className="stat-value text-lg text-warning">
<div className="stat bg-base-200 rounded-lg p-2 sm:p-4">
<div className="stat-title text-xs sm:text-sm">Alerts</div>
<div className="stat-value text-sm sm:text-lg text-warning">
{alerts?.length || 0}
</div>
<div className="stat-desc text-xs">All alerts</div>
<div className="stat-desc text-xs hidden sm:block">All alerts</div>
</div>
<div className="stat bg-base-200 rounded-lg">
<div className="stat-title text-sm">Monitoring Status</div>
<div className={`stat-value text-lg ${health?.isEnabled ? 'text-success' : 'text-error'}`}>
<div className="stat bg-base-200 rounded-lg p-2 sm:p-4">
<div className="stat-title text-xs sm:text-sm">Status</div>
<div className={`stat-value text-sm sm:text-lg ${health?.isEnabled ? 'text-success' : 'text-error'}`}>
{health?.isEnabled ? 'Active' : 'Inactive'}
</div>
<div className="stat-desc text-xs">System status</div>
<div className="stat-desc text-xs hidden sm:block">System status</div>
</div>
</div>
{/* Health Status */}
<div className="card bg-base-200">
<div className="card-body">
<h3 className="card-title text-lg">System Health</h3>
<div className="card-body p-3 sm:p-6">
<h3 className="card-title text-base sm:text-lg">System Health</h3>
{health ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-4">
<div className="flex flex-col items-center">
<span className="text-sm font-medium mb-1">Monitoring</span>
<span className={`badge ${health.isEnabled ? 'badge-success' : 'badge-error'}`}>
{health.isEnabled ? 'Enabled' : 'Disabled'}
<span className="text-xs sm:text-sm font-medium mb-1">Monitoring</span>
<span className={`badge badge-xs sm:badge-sm ${health.isEnabled ? 'badge-success' : 'badge-error'}`}>
{health.isEnabled ? 'On' : 'Off'}
</span>
</div>
<div className="flex flex-col items-center">
<span className="text-sm font-medium mb-1">Logging</span>
<span className={`badge ${health.loggingEnabled ? 'badge-success' : 'badge-error'}`}>
{health.loggingEnabled ? 'Enabled' : 'Disabled'}
<span className="text-xs sm:text-sm font-medium mb-1">Logging</span>
<span className={`badge badge-xs sm:badge-sm ${health.loggingEnabled ? 'badge-success' : 'badge-error'}`}>
{health.loggingEnabled ? 'On' : 'Off'}
</span>
</div>
<div className="flex flex-col items-center">
<span className="text-sm font-medium mb-1">Sentry</span>
<span className={`badge ${health.sentryEnabled ? 'badge-success' : 'badge-error'}`}>
{health.sentryEnabled ? 'Enabled' : 'Disabled'}
<span className="text-xs sm:text-sm font-medium mb-1">Sentry</span>
<span className={`badge badge-xs sm:badge-sm ${health.sentryEnabled ? 'badge-success' : 'badge-error'}`}>
{health.sentryEnabled ? 'On' : 'Off'}
</span>
</div>
<div className="flex flex-col items-center">
<span className="text-sm font-medium mb-1">Loop Detection</span>
<span className={`badge ${health.loopDetectionEnabled ? 'badge-success' : 'badge-error'}`}>
{health.loopDetectionEnabled ? 'Enabled' : 'Disabled'}
<span className="text-xs sm:text-sm font-medium mb-1">Loop Detection</span>
<span className={`badge badge-xs sm:badge-sm ${health.loopDetectionEnabled ? 'badge-success' : 'badge-error'}`}>
{health.loopDetectionEnabled ? 'On' : 'Off'}
</span>
</div>
<div className="flex flex-col items-center">
<span className="text-sm font-medium mb-1">Performance</span>
<span className={`badge ${health.performanceMonitoringEnabled ? 'badge-success' : 'badge-error'}`}>
{health.performanceMonitoringEnabled ? 'Enabled' : 'Disabled'}
<span className="text-xs sm:text-sm font-medium mb-1">Performance</span>
<span className={`badge badge-xs sm:badge-sm ${health.performanceMonitoringEnabled ? 'badge-success' : 'badge-error'}`}>
{health.performanceMonitoringEnabled ? 'On' : 'Off'}
</span>
</div>
</div>
@@ -372,14 +363,14 @@ const SqlMonitoring: React.FC = () => {
{/* Alerts Section */}
<div className="card bg-base-200">
<div className="card-body">
<h3 className="card-title text-lg">Recent Alerts</h3>
<div className="card-body p-3 sm:p-6">
<h3 className="card-title text-base sm:text-lg">Recent Alerts</h3>
{alertsData.length === 0 ? (
<div className="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
<div className="alert alert-info alert-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-4 h-4 sm:w-6 sm:h-6">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>No alerts found. The system is running smoothly!</span>
<span className="text-xs sm:text-sm">No alerts found. System running smoothly!</span>
</div>
) : (
<div className="overflow-x-auto">
@@ -396,17 +387,17 @@ const SqlMonitoring: React.FC = () => {
{/* Loop Detection Statistics */}
<div className="card bg-base-200">
<div className="card-body">
<h3 className="card-title text-lg">Loop Detection Statistics</h3>
<p className="text-sm text-base-content/70 mb-4">
Detailed performance metrics for tracked queries with loop detection
<div className="card-body p-3 sm:p-6">
<h3 className="card-title text-base sm:text-lg">Loop Detection</h3>
<p className="text-xs sm:text-sm text-base-content/70 mb-2 sm:mb-4">
Performance metrics for tracked queries
</p>
{loopDetectionData.length === 0 ? (
<div className="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
<div className="alert alert-info alert-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-4 h-4 sm:w-6 sm:h-6">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>No loop detection data available yet</span>
<span className="text-xs sm:text-sm">No loop detection data available</span>
</div>
) : (
<div className="overflow-x-auto">
@@ -423,17 +414,17 @@ const SqlMonitoring: React.FC = () => {
{/* Context Statistics */}
<div className="card bg-base-200">
<div className="card-body">
<h3 className="card-title text-lg">Query Execution Counts</h3>
<p className="text-sm text-base-content/70 mb-4">
Simple execution count tracking for all query patterns
<div className="card-body p-3 sm:p-6">
<h3 className="card-title text-base sm:text-lg">Query Counts</h3>
<p className="text-xs sm:text-sm text-base-content/70 mb-2 sm:mb-4">
Simple execution count tracking
</p>
{contextStatsData.length === 0 ? (
<div className="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
<div className="alert alert-info alert-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-4 h-4 sm:w-6 sm:h-6">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>No context statistics available yet</span>
<span className="text-xs sm:text-sm">No context statistics available</span>
</div>
) : (
<div className="overflow-x-auto">