solid_cache_dashboard 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  <% content_for :page_title, "Dashboard" %>
2
2
 
3
3
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
4
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
4
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
5
5
  <div class="px-4 py-5 sm:p-6">
6
6
  <div class="flex items-center">
7
7
  <div class="shrink-0 bg-green-100 dark:bg-green-700 rounded-md p-3">
@@ -10,11 +10,11 @@
10
10
  </svg>
11
11
  </div>
12
12
  <div class="ml-5 w-0 flex-1">
13
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
13
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
14
14
  Cache Hits
15
15
  </dt>
16
16
  <dd class="flex items-baseline">
17
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
17
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
18
18
  <%= @cache_events.hit_count %>
19
19
  </div>
20
20
  </dd>
@@ -23,7 +23,7 @@
23
23
  </div>
24
24
  </div>
25
25
 
26
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
26
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
27
27
  <div class="px-4 py-5 sm:p-6">
28
28
  <div class="flex items-center">
29
29
  <div class="shrink-0 bg-amber-100 dark:bg-amber-700 rounded-md p-3">
@@ -32,11 +32,11 @@
32
32
  </svg>
33
33
  </div>
34
34
  <div class="ml-5 w-0 flex-1">
35
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
35
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
36
36
  Cache Misses
37
37
  </dt>
38
38
  <dd class="flex items-baseline">
39
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
39
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
40
40
  <%= @cache_events.miss_count %>
41
41
  </div>
42
42
  </dd>
@@ -45,7 +45,7 @@
45
45
  </div>
46
46
  </div>
47
47
 
48
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
48
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
49
49
  <div class="px-4 py-5 sm:p-6">
50
50
  <div class="flex items-center">
51
51
  <div class="shrink-0 bg-sky-100 dark:bg-sky-700 rounded-md p-3">
@@ -54,11 +54,11 @@
54
54
  </svg>
55
55
  </div>
56
56
  <div class="ml-5 w-0 flex-1">
57
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
57
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
58
58
  Hit Ratio
59
59
  </dt>
60
60
  <dd class="flex items-baseline">
61
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
61
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
62
62
  <%= @cache_events.hit_percentage %>
63
63
  </div>
64
64
  </dd>
@@ -69,48 +69,48 @@
69
69
  </div>
70
70
 
71
71
  <div class="grid grid-cols-1 gap-6 mb-6">
72
- <div class="bg-white dark:bg-gray-800 shadow-sm overflow-hidden rounded-lg">
72
+ <div class="bg-white dark:bg-background shadow-sm overflow-hidden rounded-lg">
73
73
  <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
74
- <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Cache Activity</h3>
74
+ <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">Cache Activity</h3>
75
75
  <div>
76
76
  <div class="inline-flex rounded-md shadow-xs">
77
77
  <% ["30m", "1h", "3h", "6h", "12h", "1d"].each do |period| %>
78
- <%= link_to period.upcase, root_path(chart_period: period), class: "relative inline-flex items-center px-3 py-2 text-sm font-medium #{params[:chart_period] == period ? 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-white' : 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'} border border-gray-300 dark:border-gray-600" %>
78
+ <%= link_to period.upcase, root_path(chart_period: period), class: "relative inline-flex items-center px-3 py-2 text-sm font-medium #{params[:chart_period] == period ? 'bg-zinc-100 dark:bg-secondary text-zinc-700 dark:text-white' : 'bg-white dark:bg-background text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-secondary'} border border-zinc-300 dark:border-zinc-600" %>
79
79
  <% end %>
80
80
  </div>
81
81
  </div>
82
82
  </div>
83
- <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800">
83
+ <div class="px-4 py-5 sm:p-6 bg-white dark:bg-background">
84
84
  <%= line_chart @charts, height: "300px", colors: @charts.map { |c| c[:color] }, library: { scales: { y: { beginAtZero: true }, x: { ticks: { autoSkip: true, maxTicksLimit: 10 } } } } %>
85
85
  </div>
86
86
  </div>
87
87
  </div>
88
88
 
89
89
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
90
- <div class="bg-white dark:bg-gray-800 shadow-sm overflow-hidden rounded-lg">
90
+ <div class="bg-white dark:bg-background shadow-sm overflow-hidden rounded-lg">
91
91
  <div class="px-4 py-5 sm:px-6">
92
- <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Recent Cache Entries</h3>
92
+ <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">Recent Cache Entries</h3>
93
93
  </div>
94
- <div class="border-t border-gray-200 dark:border-gray-700">
94
+ <div class="border-t border-zinc-200 dark:border-zinc-700">
95
95
  <div class="overflow-x-auto">
96
- <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
97
- <thead class="bg-gray-50 dark:bg-gray-900">
96
+ <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
97
+ <thead class="bg-zinc-50 dark:bg-card">
98
98
  <tr>
99
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key</th>
100
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Size</th>
101
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Created</th>
99
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Key</th>
100
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Size</th>
101
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Created</th>
102
102
  </tr>
103
103
  </thead>
104
- <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
104
+ <tbody class="bg-white dark:bg-background divide-y divide-zinc-200 dark:divide-zinc-700">
105
105
  <% @cache_entries.take(5).each do |entry| %>
106
106
  <tr>
107
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]">
107
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-zinc-900 dark:text-white truncate max-w-[200px]">
108
108
  <%= link_to entry.key, cache_entry_path(entry.key_hash), class: "hover:underline" %>
109
109
  </td>
110
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
110
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
111
111
  <%= entry.human_byte_size %>
112
112
  </td>
113
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
113
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
114
114
  <%= entry.created_at_ago %>
115
115
  </td>
116
116
  </tr>
@@ -118,36 +118,36 @@
118
118
  </tbody>
119
119
  </table>
120
120
  </div>
121
- <div class="bg-white dark:bg-gray-800 px-4 py-3 border-t border-gray-200 dark:border-gray-700 text-right sm:px-6">
122
- <%= link_to "View all entries", cache_entries_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-xs text-sm font-medium rounded-md text-gray-700 dark:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700" %>
121
+ <div class="bg-white dark:bg-background px-4 py-3 border-t border-zinc-200 dark:border-zinc-700 text-right sm:px-6">
122
+ <%= link_to "View all entries", cache_entries_path, class: "inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 shadow-xs text-sm font-medium rounded-md text-zinc-700 dark:text-white bg-white dark:bg-background hover:bg-zinc-50 dark:hover:bg-secondary" %>
123
123
  </div>
124
124
  </div>
125
125
  </div>
126
126
 
127
- <div class="bg-white dark:bg-gray-800 shadow-sm overflow-hidden rounded-lg">
127
+ <div class="bg-white dark:bg-background shadow-sm overflow-hidden rounded-lg">
128
128
  <div class="px-4 py-5 sm:px-6">
129
- <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Recent Cache Events</h3>
129
+ <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">Recent Cache Events</h3>
130
130
  </div>
131
- <div class="border-t border-gray-200 dark:border-gray-700">
131
+ <div class="border-t border-zinc-200 dark:border-zinc-700">
132
132
  <div class="overflow-x-auto">
133
- <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
134
- <thead class="bg-gray-50 dark:bg-gray-900">
133
+ <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
134
+ <thead class="bg-zinc-50 dark:bg-card">
135
135
  <tr>
136
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</th>
137
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key</th>
138
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Time</th>
136
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Type</th>
137
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Key</th>
138
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Time</th>
139
139
  </tr>
140
140
  </thead>
141
- <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
141
+ <tbody class="bg-white dark:bg-background divide-y divide-zinc-200 dark:divide-zinc-700">
142
142
  <% @cache_events.take(5).each do |event| %>
143
143
  <tr>
144
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
144
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
145
145
  <%= badge event.event_type.to_s.capitalize, event.color %>
146
146
  </td>
147
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]">
147
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-zinc-900 dark:text-white truncate max-w-[200px]">
148
148
  <%= event.key_string %>
149
149
  </td>
150
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
150
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
151
151
  <%= event.created_at_ago %>
152
152
  </td>
153
153
  </tr>
@@ -155,8 +155,8 @@
155
155
  </tbody>
156
156
  </table>
157
157
  </div>
158
- <div class="bg-white dark:bg-gray-800 px-4 py-3 border-t border-gray-200 dark:border-gray-700 text-right sm:px-6">
159
- <%= link_to "View all events", cache_events_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-xs text-sm font-medium rounded-md text-gray-700 dark:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700" %>
158
+ <div class="bg-white dark:bg-background px-4 py-3 border-t border-zinc-200 dark:border-zinc-700 text-right sm:px-6">
159
+ <%= link_to "View all events", cache_events_path, class: "inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 shadow-xs text-sm font-medium rounded-md text-zinc-700 dark:text-white bg-white dark:bg-background hover:bg-zinc-50 dark:hover:bg-secondary" %>
160
160
  </div>
161
161
  </div>
162
162
  </div>
@@ -2,7 +2,7 @@
2
2
 
3
3
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
4
4
  <!-- Cache Entries Count -->
5
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
5
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
6
6
  <div class="px-4 py-5 sm:p-6">
7
7
  <div class="flex items-center">
8
8
  <div class="shrink-0 bg-blue-100 dark:bg-blue-700 rounded-md p-3">
@@ -11,11 +11,11 @@
11
11
  </svg>
12
12
  </div>
13
13
  <div class="ml-5 w-0 flex-1">
14
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
14
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
15
15
  Cache Entries
16
16
  </dt>
17
17
  <dd class="flex items-baseline">
18
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
18
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
19
19
  <%= @cache_entries_count %>
20
20
  </div>
21
21
  </dd>
@@ -25,7 +25,7 @@
25
25
  </div>
26
26
 
27
27
  <!-- Cache Size -->
28
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
28
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
29
29
  <div class="px-4 py-5 sm:p-6">
30
30
  <div class="flex items-center">
31
31
  <div class="shrink-0 bg-purple-100 dark:bg-purple-700 rounded-md p-3">
@@ -34,11 +34,11 @@
34
34
  </svg>
35
35
  </div>
36
36
  <div class="ml-5 w-0 flex-1">
37
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
37
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
38
38
  Cache Size
39
39
  </dt>
40
40
  <dd class="flex items-baseline">
41
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
41
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
42
42
  <%= @cache_entries_human_size %>
43
43
  </div>
44
44
  </dd>
@@ -48,7 +48,7 @@
48
48
  </div>
49
49
 
50
50
  <!-- Hit Ratio -->
51
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
51
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
52
52
  <div class="px-4 py-5 sm:p-6">
53
53
  <div class="flex items-center">
54
54
  <div class="shrink-0 bg-sky-100 dark:bg-sky-700 rounded-md p-3">
@@ -57,11 +57,11 @@
57
57
  </svg>
58
58
  </div>
59
59
  <div class="ml-5 w-0 flex-1">
60
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
60
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
61
61
  Hit Ratio
62
62
  </dt>
63
63
  <dd class="flex items-baseline">
64
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
64
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
65
65
  <%= @hit_percentage %>
66
66
  </div>
67
67
  </dd>
@@ -71,7 +71,7 @@
71
71
  </div>
72
72
 
73
73
  <!-- Total Operations -->
74
- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg">
74
+ <div class="bg-white dark:bg-card overflow-hidden shadow-sm rounded-lg">
75
75
  <div class="px-4 py-5 sm:p-6">
76
76
  <div class="flex items-center">
77
77
  <div class="shrink-0 bg-indigo-100 dark:bg-indigo-700 rounded-md p-3">
@@ -80,11 +80,11 @@
80
80
  </svg>
81
81
  </div>
82
82
  <div class="ml-5 w-0 flex-1">
83
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
83
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate">
84
84
  Total Operations
85
85
  </dt>
86
86
  <dd class="flex items-baseline">
87
- <div class="text-2xl font-semibold text-gray-900 dark:text-white">
87
+ <div class="text-2xl font-semibold text-zinc-900 dark:text-white">
88
88
  <%= @hit_count + @miss_count + @write_count + @delete_count %>
89
89
  </div>
90
90
  </dd>
@@ -97,64 +97,64 @@
97
97
  <!-- Event Type Breakdown -->
98
98
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
99
99
  <!-- Event Types -->
100
- <div class="bg-white dark:bg-gray-800 shadow-sm overflow-hidden rounded-lg">
100
+ <div class="bg-white dark:bg-background shadow-sm overflow-hidden rounded-lg">
101
101
  <div class="px-4 py-5 sm:px-6">
102
- <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Cache Operation Metrics</h3>
102
+ <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">Cache Operation Metrics</h3>
103
103
  </div>
104
- <div class="border-t border-gray-200 dark:border-gray-700">
104
+ <div class="border-t border-zinc-200 dark:border-zinc-700">
105
105
  <div class="overflow-x-auto">
106
- <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
107
- <thead class="bg-gray-50 dark:bg-gray-900">
106
+ <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
107
+ <thead class="bg-zinc-50 dark:bg-card">
108
108
  <tr>
109
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Operation</th>
110
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Count</th>
111
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Percentage</th>
109
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Operation</th>
110
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Count</th>
111
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Percentage</th>
112
112
  </tr>
113
113
  </thead>
114
- <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
114
+ <tbody class="bg-white dark:bg-background divide-y divide-zinc-200 dark:divide-zinc-700">
115
115
  <% total_events = @hit_count + @miss_count + @write_count + @delete_count %>
116
116
  <% total_events = 1 if total_events.zero? %>
117
117
  <tr>
118
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
118
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-zinc-900 dark:text-white">
119
119
  <%= badge "Hit", "green" %>
120
120
  </td>
121
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
121
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
122
122
  <%= @hit_count %>
123
123
  </td>
124
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
124
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
125
125
  <%= "#{((@hit_count.to_f / total_events) * 100).round(2)}%" %>
126
126
  </td>
127
127
  </tr>
128
128
  <tr>
129
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
129
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-zinc-900 dark:text-white">
130
130
  <%= badge "Miss", "amber" %>
131
131
  </td>
132
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
132
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
133
133
  <%= @miss_count %>
134
134
  </td>
135
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
135
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
136
136
  <%= "#{((@miss_count.to_f / total_events) * 100).round(2)}%" %>
137
137
  </td>
138
138
  </tr>
139
139
  <tr>
140
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
140
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-zinc-900 dark:text-white">
141
141
  <%= badge "Write", "blue" %>
142
142
  </td>
143
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
143
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
144
144
  <%= @write_count %>
145
145
  </td>
146
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
146
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
147
147
  <%= "#{((@write_count.to_f / total_events) * 100).round(2)}%" %>
148
148
  </td>
149
149
  </tr>
150
150
  <tr>
151
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
151
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-zinc-900 dark:text-white">
152
152
  <%= badge "Delete", "red" %>
153
153
  </td>
154
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
154
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
155
155
  <%= @delete_count %>
156
156
  </td>
157
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
157
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
158
158
  <%= "#{((@delete_count.to_f / total_events) * 100).round(2)}%" %>
159
159
  </td>
160
160
  </tr>
@@ -165,17 +165,17 @@
165
165
  </div>
166
166
 
167
167
  <!-- Read Performance -->
168
- <div class="bg-white dark:bg-gray-800 shadow-sm overflow-hidden rounded-lg">
168
+ <div class="bg-white dark:bg-background shadow-sm overflow-hidden rounded-lg">
169
169
  <div class="px-4 py-5 sm:px-6">
170
- <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Read Performance</h3>
170
+ <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">Read Performance</h3>
171
171
  </div>
172
- <div class="border-t border-gray-200 dark:border-gray-700">
172
+ <div class="border-t border-zinc-200 dark:border-zinc-700">
173
173
  <div class="px-4 py-5 sm:p-6">
174
174
  <div class="space-y-4">
175
175
  <div>
176
- <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400">Hit Rate</h4>
176
+ <h4 class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Hit Rate</h4>
177
177
  <div class="mt-2 relative pt-1">
178
- <div class="overflow-hidden h-6 text-xs flex rounded-full bg-gray-200 dark:bg-gray-700">
178
+ <div class="overflow-hidden h-6 text-xs flex rounded-full bg-zinc-200 dark:bg-secondary">
179
179
  <div style="width:<%= @hit_percentage %>" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500 dark:bg-green-600 rounded-l-full">
180
180
  <span class="px-2 font-semibold"><%= @hit_percentage %></span>
181
181
  </div>
@@ -183,7 +183,7 @@
183
183
  <span class="px-2 font-semibold"><%= "#{(100 - (@hit_ratio * 100).round(2))}%" %></span>
184
184
  </div>
185
185
  </div>
186
- <div class="mt-1 flex justify-between text-xs text-gray-500 dark:text-gray-400">
186
+ <div class="mt-1 flex justify-between text-xs text-zinc-500 dark:text-zinc-400">
187
187
  <span>Hits: <%= @hit_count %></span>
188
188
  <span>Misses: <%= @miss_count %></span>
189
189
  </div>
@@ -191,7 +191,7 @@
191
191
  </div>
192
192
 
193
193
  <div class="pt-4">
194
- <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400">Operation Distribution</h4>
194
+ <h4 class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Operation Distribution</h4>
195
195
  <div class="mt-2 flex flex-col space-y-2">
196
196
  <div class="relative pt-1">
197
197
  <div class="flex mb-2 items-center justify-between">
@@ -206,7 +206,7 @@
206
206
  </span>
207
207
  </div>
208
208
  </div>
209
- <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
209
+ <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-zinc-200 dark:bg-secondary">
210
210
  <div style="width:<%= (((@hit_count + @miss_count).to_f / total_events) * 100).round(2) %>%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500 dark:bg-green-600"></div>
211
211
  </div>
212
212
  </div>
@@ -223,7 +223,7 @@
223
223
  </span>
224
224
  </div>
225
225
  </div>
226
- <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
226
+ <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-zinc-200 dark:bg-secondary">
227
227
  <div style="width:<%= ((@write_count.to_f / total_events) * 100).round(2) %>%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-600"></div>
228
228
  </div>
229
229
  </div>
@@ -240,7 +240,7 @@
240
240
  </span>
241
241
  </div>
242
242
  </div>
243
- <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
243
+ <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-zinc-200 dark:bg-secondary">
244
244
  <div style="width:<%= ((@delete_count.to_f / total_events) * 100).round(2) %>%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500 dark:bg-red-600"></div>
245
245
  </div>
246
246
  </div>
@@ -254,33 +254,33 @@
254
254
 
255
255
  <!-- Cache Storage Stats -->
256
256
  <div class="grid grid-cols-1 gap-6">
257
- <div class="bg-white dark:bg-gray-800 shadow-sm overflow-hidden rounded-lg">
257
+ <div class="bg-white dark:bg-card shadow-sm overflow-hidden rounded-lg">
258
258
  <div class="px-4 py-5 sm:px-6">
259
- <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Cache Storage Details</h3>
259
+ <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">Cache Storage Details</h3>
260
260
  </div>
261
- <div class="border-t border-gray-200 dark:border-gray-700">
262
- <div class="divide-y divide-gray-200 dark:divide-gray-700">
261
+ <div class="border-t border-zinc-200 dark:border-zinc-700">
262
+ <div class="divide-y divide-zinc-200 dark:divide-zinc-700">
263
263
  <div class="py-4 sm:py-5 sm:grid sm:grid-cols-2 sm:gap-4 sm:px-6">
264
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
264
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
265
265
  Total Entries
266
266
  </dt>
267
- <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0">
267
+ <dd class="mt-1 text-sm text-zinc-900 dark:text-white sm:mt-0">
268
268
  <%= @cache_entries_count %>
269
269
  </dd>
270
270
  </div>
271
271
  <div class="py-4 sm:py-5 sm:grid sm:grid-cols-2 sm:gap-4 sm:px-6">
272
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
272
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
273
273
  Total Size
274
274
  </dt>
275
- <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0">
275
+ <dd class="mt-1 text-sm text-zinc-900 dark:text-white sm:mt-0">
276
276
  <%= @cache_entries_human_size %> (<%= @cache_entries_size %> bytes)
277
277
  </dd>
278
278
  </div>
279
279
  <div class="py-4 sm:py-5 sm:grid sm:grid-cols-2 sm:gap-4 sm:px-6">
280
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
280
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
281
281
  Average Entry Size
282
282
  </dt>
283
- <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0">
283
+ <dd class="mt-1 text-sm text-zinc-900 dark:text-white sm:mt-0">
284
284
  <% if @cache_entries_count > 0 %>
285
285
  <%= ActiveSupport::NumberHelper.number_to_human_size(@cache_entries_size / @cache_entries_count) %>
286
286
  <% else %>
@@ -289,10 +289,10 @@
289
289
  </dd>
290
290
  </div>
291
291
  <div class="py-4 sm:py-5 sm:grid sm:grid-cols-2 sm:gap-4 sm:px-6">
292
- <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
292
+ <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
293
293
  Hit Ratio
294
294
  </dt>
295
- <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0">
295
+ <dd class="mt-1 text-sm text-zinc-900 dark:text-white sm:mt-0">
296
296
  <%= @hit_percentage %> (<%= @hit_count %> hits / <%= @hit_count + @miss_count %> reads)
297
297
  </dd>
298
298
  </div>
@@ -11,8 +11,41 @@ module SolidCacheDashboard
11
11
  EXPIRED => "amber"
12
12
  }
13
13
 
14
+ # Returns the appropriate color for the given status
14
15
  def self.status_color(status)
15
16
  STATUS_COLORS[status] || "zinc"
16
17
  end
18
+
19
+ # Calculates the expiration status for a cache entry
20
+ def self.determine_expiration_status(entry)
21
+ return ACTIVE unless entry.respond_to?(:expires_at) && entry.expires_at
22
+ entry.expires_at <= Time.now ? EXPIRED : ACTIVE
23
+ end
24
+
25
+ # Returns size breakdown information for a given entry
26
+ def self.size_breakdown(entry)
27
+ {
28
+ key_size: entry.key.to_s.bytesize,
29
+ value_size: entry.value.to_s.bytesize,
30
+ overhead_size: estimate_overhead(entry)
31
+ }
32
+ end
33
+
34
+ # Estimates the overhead size of a cache entry based on the SolidCache::Entry constants
35
+ def self.estimate_overhead(entry)
36
+ if defined?(SolidCache.configuration) && SolidCache.configuration.respond_to?(:encrypt?) && SolidCache.configuration.encrypt?
37
+ estimated_encryption_overhead = defined?(SolidCache::Entry::ESTIMATED_ENCRYPTION_OVERHEAD) ?
38
+ SolidCache::Entry::ESTIMATED_ENCRYPTION_OVERHEAD :
39
+ 170
40
+ estimated_row_overhead = defined?(SolidCache::Entry::ESTIMATED_ROW_OVERHEAD) ?
41
+ SolidCache::Entry::ESTIMATED_ROW_OVERHEAD :
42
+ 140
43
+ estimated_row_overhead + estimated_encryption_overhead
44
+ else
45
+ defined?(SolidCache::Entry::ESTIMATED_ROW_OVERHEAD) ?
46
+ SolidCache::Entry::ESTIMATED_ROW_OVERHEAD :
47
+ 140
48
+ end
49
+ end
17
50
  end
18
51
  end