Skip to content

Commit e8bef98

Browse files
RobiNN1RobiNN1
committed
Add data auto refresh for side panels
1 parent 0edc8b9 commit e8bef98

File tree

16 files changed

+216
-37
lines changed

16 files changed

+216
-37
lines changed

‎assets/css/styles.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
1+
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
22
@layer properties;
33
@layer theme, base, components, utilities;
44
@layer theme {
@@ -151,6 +151,9 @@
151151
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
152152
padding-block: 0;
153153
}
154+
::-webkit-calendar-picker-indicator {
155+
line-height: 1;
156+
}
154157
:-moz-ui-invalid {
155158
box-shadow: none;
156159
}
@@ -578,6 +581,11 @@
578581
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
579582
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
580583
}
584+
.transition-\[width\,background-color\] {
585+
transition-property: width,background-color;
586+
transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
587+
transition-duration: var(--tw-duration, 150ms);
588+
}
581589
.transition-opacity {
582590
transition-property: opacity;
583591
transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
@@ -587,6 +595,14 @@
587595
--tw-duration: 300ms;
588596
transition-duration: 300ms;
589597
}
598+
.duration-500 {
599+
--tw-duration: 500ms;
600+
transition-duration: 500ms;
601+
}
602+
.ease-in-out {
603+
--tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
604+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
605+
}
590606
.select-none {
591607
-webkit-user-select: none;
592608
user-select: none;
@@ -1470,6 +1486,10 @@
14701486
syntax: "*";
14711487
inherits: false;
14721488
}
1489+
@property --tw-ease {
1490+
syntax: "*";
1491+
inherits: false;
1492+
}
14731493
@layer properties {
14741494
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
14751495
*, ::before, ::after, ::backdrop {
@@ -1492,6 +1512,7 @@
14921512
--tw-ring-offset-color: #fff;
14931513
--tw-ring-offset-shadow: 0 0 #0000;
14941514
--tw-duration: initial;
1515+
--tw-ease: initial;
14951516
}
14961517
}
14971518
}

‎assets/js/scripts.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,80 @@ if (check_all) {
152152
});
153153
}
154154

155+
/**
156+
* Ajax panels
157+
*/
158+
document.addEventListener('DOMContentLoaded', function () {
159+
function updateProgressBar(progress_element, percentage) {
160+
const type = progress_element.dataset.type;
161+
let color_class;
162+
163+
if (type === 'higher') {
164+
if (percentage >= 80) {
165+
color_class = 'bg-green-600';
166+
} else if (percentage >= 50) {
167+
color_class = 'bg-orange-600';
168+
} else {
169+
color_class = 'bg-red-600';
170+
}
171+
} else {
172+
if (percentage <= 50) {
173+
color_class = 'bg-green-600';
174+
} else if (percentage <= 80) {
175+
color_class = 'bg-orange-600';
176+
} else {
177+
color_class = 'bg-red-600';
178+
}
179+
}
180+
181+
progress_element.classList.remove('bg-red-600', 'bg-orange-600', 'bg-green-600');
182+
progress_element.classList.add(color_class);
183+
progress_element.style.width = percentage + '%';
184+
}
185+
186+
function updateElement(panel_element, key, value) {
187+
const element = panel_element.querySelector(`[data-value="${key}"]`);
188+
189+
if (!element) return;
190+
191+
if (Array.isArray(value)) {
192+
element.textContent = value[0];
193+
const progress_element = document.getElementById(key + '_progress');
194+
if (progress_element) {
195+
updateProgressBar(progress_element, value[1]);
196+
}
197+
} else {
198+
element.textContent = value;
199+
}
200+
}
201+
202+
function refreshPanels() {
203+
ajax('panels', function (request) {
204+
if (request.currentTarget.status >= 200 && request.currentTarget.status < 400) {
205+
const data = JSON.parse(request.currentTarget.response);
206+
207+
for (const section_key in data) {
208+
const panel_element = document.getElementById(section_key + '_panel');
209+
210+
if (panel_element) {
211+
const section_data = data[section_key];
212+
for (const item_key in section_data) {
213+
updateElement(panel_element, item_key, section_data[item_key]);
214+
}
215+
}
216+
}
217+
} else {
218+
console.error('Error fetching panel data.');
219+
}
220+
});
221+
}
222+
223+
if (ajax_panels) {
224+
refreshPanels();
225+
setInterval(refreshPanels, panels_refresh_interval);
226+
}
227+
});
228+
155229
/**
156230
* JSON syntax highlighter
157231
*/

‎config.dist.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,4 +136,5 @@
136136
'decimal-sep' => ',',
137137
'thousands-sep' => ' ',
138138
'list-view' => 'table', // table/tree - default key list view
139+
'panelrefresh' => 2000, // In ms, refresh interval for panels - default 2000
139140
];

‎src/Dashboards/APCu/APCuDashboard.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ public function dashboardInfo(): array {
4646
}
4747

4848
public function ajax(): string {
49+
if (isset($_GET['panels'])) {
50+
return Helpers::getPanelsJson($this->getPanelsData());
51+
}
52+
4953
if (isset($_GET['deleteall']) && apcu_clear_cache()) {
5054
return Helpers::alert($this->template, 'Cache has been cleaned.', 'success');
5155
}
@@ -58,7 +62,8 @@ public function ajax(): string {
5862
}
5963

6064
public function dashboard(): string {
61-
$this->template->addGlobal('side', $this->panels());
65+
$this->template->addGlobal('ajax_panels', true);
66+
$this->template->addGlobal('side', $this->template->render('partials/info', ['panels' => $this->getPanelsData()]));
6267

6368
if (isset($_GET['moreinfo'])) {
6469
return $this->moreInfo();

‎src/Dashboards/APCu/APCuTrait.php‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
use RobiNN\Pca\Value;
1717

1818
trait APCuTrait {
19-
private function panels(): string {
19+
/**
20+
* @return array<int|string, mixed>
21+
*/
22+
private function getPanelsData(): array {
2023
$info = apcu_cache_info(true);
2124
$memory_info = apcu_sma_info(true);
2225

@@ -28,7 +31,7 @@ private function panels(): string {
2831
$num_misses = (int) $info['num_misses'];
2932
$hit_rate = $num_hits !== 0 ? round(($num_hits / ($num_hits + $num_misses)) * 100, 2) : 0;
3033

31-
$panels = [
34+
return [
3235
[
3336
'title' => 'PHP APCu extension v'.phpversion('apcu'),
3437
'moreinfo' => true,
@@ -57,8 +60,6 @@ private function panels(): string {
5760
],
5861
],
5962
];
60-
61-
return $this->template->render('partials/info', ['panels' => $panels]);
6263
}
6364

6465
private function moreInfo(): string {

‎src/Dashboards/Memcached/MemcachedDashboard.php‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@ public function ajax(): string {
8989
try {
9090
$this->memcached = $this->connect($this->servers[$this->current_server]);
9191

92+
if (isset($_GET['panels'])) {
93+
return Helpers::getPanelsJson($this->getPanelsData());
94+
}
95+
9296
if (isset($_GET['deleteall'])) {
9397
return $this->deleteAllKeys();
9498
}
@@ -112,8 +116,8 @@ public function dashboard(): string {
112116

113117
try {
114118
$this->memcached = $this->connect($this->servers[$this->current_server]);
115-
116-
$this->template->addGlobal('side', $this->panels());
119+
$this->template->addGlobal('ajax_panels', true);
120+
$this->template->addGlobal('side', $this->template->render('partials/info', ['panels' => $this->getPanelsData()]));
117121

118122
if (isset($_GET['moreinfo'])) {
119123
return $this->moreInfo();

‎src/Dashboards/Memcached/MemcachedTrait.php‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,20 @@
1616
use RobiNN\Pca\Value;
1717

1818
trait MemcachedTrait {
19-
private function panels(): string {
20-
if (class_exists(PHPMem::class)) {
21-
$title = 'PHPMem v'.PHPMem::VERSION;
22-
}
23-
19+
/**
20+
* @return array<int|string, mixed>
21+
*/
22+
private function getPanelsData(): array {
2423
try {
24+
if (class_exists(PHPMem::class)) {
25+
$title = 'PHPMem v'.PHPMem::VERSION;
26+
}
27+
2528
$info = $this->memcached->getServerStats();
2629

27-
$memory_usage = round(($info['bytes'] / $info['limit_maxbytes']) * 100, 2);
30+
$memory_usage = ($info['limit_maxbytes'] > 0) ? round(($info['bytes'] / $info['limit_maxbytes']) * 100, 2) : 0;
2831

29-
$panels = [
32+
return [
3033
[
3134
'title' => $title ?? null,
3235
'moreinfo' => true,
@@ -64,10 +67,8 @@ private function panels(): string {
6467
],
6568
];
6669
} catch (MemcachedException $e) {
67-
$panels = ['error' => $e->getMessage()];
70+
return ['error' => $e->getMessage()];
6871
}
69-
70-
return $this->template->render('partials/info', ['panels' => $panels]);
7172
}
7273

7374
/**

‎src/Dashboards/OPCache/OPCacheDashboard.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ public function dashboardInfo(): array {
4646
}
4747

4848
public function ajax(): string {
49+
if (isset($_GET['panels'])) {
50+
return Helpers::getPanelsJson($this->getPanelsData());
51+
}
52+
4953
if (isset($_GET['deleteall']) && opcache_reset()) {
5054
return Helpers::alert($this->template, 'Cache has been cleaned.', 'success');
5155
}
@@ -58,7 +62,8 @@ public function ajax(): string {
5862
}
5963

6064
public function dashboard(): string {
61-
$this->template->addGlobal('side', $this->panels());
65+
$this->template->addGlobal('ajax_panels', true);
66+
$this->template->addGlobal('side', $this->template->render('partials/info', ['panels' => $this->getPanelsData()]));
6267

6368
if (isset($_GET['moreinfo'])) {
6469
return $this->moreInfo();

‎src/Dashboards/OPCache/OPCacheTrait.php‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414
use RobiNN\Pca\Paginator;
1515

1616
trait OPCacheTrait {
17-
private function panels(): string {
17+
/**
18+
* @return array<int|string, mixed>
19+
*/
20+
private function getPanelsData(): array {
1821
$status = opcache_get_status(false);
1922
$configuration = opcache_get_configuration();
2023

@@ -51,7 +54,7 @@ private function panels(): string {
5154
];
5255
}
5356

54-
$panels = [
57+
return [
5558
[
5659
'title' => 'PHP OPCache extension v'.phpversion('Zend OPcache'),
5760
'moreinfo' => true,
@@ -94,8 +97,6 @@ private function panels(): string {
9497
],
9598
],
9699
];
97-
98-
return $this->template->render('partials/info', ['panels' => $panels]);
99100
}
100101

101102
private function moreInfo(): string {

‎src/Dashboards/Redis/RedisDashboard.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ public function ajax(): string {
100100
try {
101101
$this->redis = $this->connect($this->servers[$this->current_server]);
102102

103+
if (isset($_GET['panels'])) {
104+
return Helpers::getPanelsJson($this->getPanelsData());
105+
}
106+
103107
if (isset($_GET['deleteall'])) {
104108
return $this->deleteAllKeys();
105109
}
@@ -127,8 +131,9 @@ public function dashboard(): string {
127131

128132
try {
129133
$this->redis = $this->connect($this->servers[$this->current_server]);
130-
131-
$this->template->addGlobal('side', $this->dbSelect().$this->panels());
134+
$this->template->addGlobal('ajax_panels', true);
135+
$panels = $this->template->render('partials/info', ['panels' => $this->getPanelsData()]);
136+
$this->template->addGlobal('side', $this->dbSelect().$panels);
132137

133138
if (isset($_GET['moreinfo'])) {
134139
return $this->moreInfo();

0 commit comments

Comments
 (0)