From 5a91c0fdd1a45a219595a26f5973b4d95a738657 Mon Sep 17 00:00:00 2001
From: cryptooda <crypto.oda@gmail.com>
Date: Fri, 10 Oct 2025 02:25:50 +0700
Subject: [PATCH] Update front

---
 .../sqlmonitoring/sqlMonitoring.tsx           | 231 +++++++++---------
 1 file changed, 111 insertions(+), 120 deletions(-)

diff --git a/src/Managing.WebApp/src/pages/settingsPage/sqlmonitoring/sqlMonitoring.tsx b/src/Managing.WebApp/src/pages/settingsPage/sqlmonitoring/sqlMonitoring.tsx
index c8971164..19ec9a44 100644
--- a/src/Managing.WebApp/src/pages/settingsPage/sqlmonitoring/sqlMonitoring.tsx
+++ b/src/Managing.WebApp/src/pages/settingsPage/sqlmonitoring/sqlMonitoring.tsx
@@ -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">