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