Skip to content

Commit 65d9d54

Browse files
vc-sahilvc-sahil
committed
Merge CPU & Memory values to docker monitor key
1 parent 1f199cb commit 65d9d54

File tree

4 files changed

+172
-237
lines changed

4 files changed

+172
-237
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
## <p style="font-family: 'CustomFont';"><i class="fas fa-cog"></i> _Installation_</p>
1919
<br>
2020

21-
<p style="font-family: 'CustomFont'; font-size: 24px">Prerequisites</b></p>
21+
<p style="font-family: 'CustomFont'; font-size: 24px"><b>Prerequisites</b></p>
2222
<p style="font-family: 'CustomFont';"> Please check the official laravel installation guide for server requirements before you start. <a href="https://laravel.com/docs/10.x/pulse">[Official Documentation]</a></p>
2323

2424
<p style="font-family: 'CustomFont';"><b>Require the package with Composer:</b></p>

‎resources/views/livewire/pulse_docker_monitor.blade.php

+120-180
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,16 @@
2424
</colgroup>
2525
<x-pulse::thead>
2626
<tr>
27-
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Name</x-pulse::th>
28-
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Status</x-pulse::th>
29-
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Port</x-pulse::th>
30-
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Cpu</x-pulse::th>
31-
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Memory</x-pulse::th>
27+
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Name
28+
</x-pulse::th>
29+
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Status
30+
</x-pulse::th>
31+
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Port
32+
</x-pulse::th>
33+
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Cpu
34+
</x-pulse::th>
35+
<x-pulse::th class="text-base font-bold text-gray-600 dark:text-gray-300">Memory
36+
</x-pulse::th>
3237
</tr>
3338
</x-pulse::thead>
3439
<tbody>
@@ -52,8 +57,9 @@
5257
<x-pulse::td>
5358
<div class="mt-3 relative flex">
5459
<div wire:key="docker-cpu" class="">
55-
<div class="text-xl font-bold text-gray-700 dark:text-gray-200 w-14 whitespace-nowrap tabular-nums">
56-
{{ round($graph[$container['name']]['docker_cpu']->last()) ?? 0 }}%
60+
<div
61+
class="text-xl font-bold text-gray-700 dark:text-gray-200 w-14 whitespace-nowrap tabular-nums">
62+
{{ round($container['cpu']) ?? 0 }}%
5763
</div>
5864
</div>
5965
<div wire:ignore class="h-14 w-full"
@@ -70,11 +76,11 @@ class="ring-1 ring-gray-900/5 dark:ring-gray-100/10 bg-gray-50 dark:bg-gray-800
7076
</div>
7177
</x-pulse::td>
7278
<x-pulse::td>
73-
7479
<div class="mt-3 relative flex">
7580
<div wire:key="docker-memory" class=" ">
76-
<div class="text-xl font-bold text-gray-700 dark:text-gray-200 w-14 whitespace-nowrap tabular-nums">
77-
{{ round($graph[$container['name']]['docker_memory']->last()) ?? 0 }}%
81+
<div
82+
class="text-xl font-bold text-gray-700 dark:text-gray-200 w-14 whitespace-nowrap tabular-nums">
83+
{{ round($container['memory']) ?? 0 }}%
7884
</div>
7985
</div>
8086
<div wire:ignore class="h-14 w-full"
@@ -102,201 +108,135 @@ class="ring-1 ring-gray-900/5 dark:ring-gray-100/10 bg-gray-50 dark:bg-gray-800
102108

103109
@script
104110
<script>
111+
const chartConfig = {
112+
maintainAspectRatio: false,
113+
layout: {
114+
autoPadding: false,
115+
padding: {
116+
top: 1,
117+
},
118+
},
119+
datasets: {
120+
line: {
121+
borderWidth: 2,
122+
borderCapStyle: 'round',
123+
pointHitRadius: 10,
124+
pointStyle: false,
125+
tension: 0.2,
126+
spanGaps: false,
127+
segment: {
128+
borderColor: (ctx) => ctx.p0.raw === 0 && ctx.p1.raw === 0 ? 'transparent' : undefined,
129+
},
130+
},
131+
},
132+
scales: {
133+
x: {
134+
display: false,
135+
},
136+
y: {
137+
display: false,
138+
min: 0,
139+
max: 1, // Adjust the max value as needed
140+
},
141+
},
142+
plugins: {
143+
legend: {
144+
display: false,
145+
},
146+
tooltip: {
147+
mode: 'index',
148+
position: 'nearest',
149+
intersect: false,
150+
callbacks: {
151+
beforeBody: (context) => context
152+
.map(item => `${item.dataset.label}: ${1 < 1 ? '~' : ''}${item.formattedValue}%`)
153+
.join(', '),
154+
label: () => null,
155+
},
156+
},
157+
},
158+
};
159+
160+
function createChart(type, label, color, data, options) {
161+
return new Chart(
162+
this.$refs.canvas,
163+
{
164+
type: type,
165+
data: {
166+
labels: this.labels(data),
167+
datasets: [
168+
{
169+
label: label,
170+
borderColor: color,
171+
data: this.scale(data),
172+
order: 1,
173+
},
174+
],
175+
},
176+
options: {...chartConfig, ...options},
177+
}
178+
);
179+
}
180+
181+
function updateChart(chart, graph, containerName, dataKey) {
182+
if (chart === undefined) {
183+
return;
184+
}
185+
186+
if (graph === undefined && chart) {
187+
chart.destroy();
188+
chart = undefined;
189+
return;
190+
}
191+
192+
chart.data.labels = this.labels(graph[containerName]);
193+
chart.options.scales.y.max = this.highest(graph[containerName]);
194+
chart.data.datasets[0].data = this.scale(graph[containerName][dataKey]);
195+
chart.update();
196+
}
197+
105198
Alpine.data('cpuChart', (config) => ({
106199
containerName: config.containerName,
107200
containerIndex: config.containerIndex,
108201
init() {
109-
let chart = new Chart(
110-
this.$refs.canvas,
111-
{
112-
type: 'line',
113-
data: {
114-
labels: this.labels(config.readings),
115-
datasets: [
116-
{
117-
label: 'CPU',
118-
borderColor: '#d5e80d',
119-
data: this.scale(config.readings[config.containerName].docker_cpu),
120-
order: 1,
121-
}
122-
],
123-
},
124-
options: {
125-
maintainAspectRatio: false,
126-
layout: {
127-
autoPadding: false,
128-
padding: {
129-
top: 1,
130-
},
131-
},
132-
datasets: {
133-
line: {
134-
borderWidth: 2,
135-
borderCapStyle: 'round',
136-
pointHitRadius: 10,
137-
pointStyle: false,
138-
tension: 0.2,
139-
spanGaps: false,
140-
segment: {
141-
borderColor: (ctx) => ctx.p0.raw === 0 && ctx.p1.raw === 0 ? 'transparent' : undefined,
142-
}
143-
}
144-
},
145-
scales: {
146-
x: {
147-
display: false,
148-
},
149-
y: {
150-
display: false,
151-
min: 0,
152-
max: this.highest(config.readings),
153-
},
154-
},
155-
plugins: {
156-
legend: {
157-
display: false,
158-
},
159-
tooltip: {
160-
mode: 'index',
161-
position: 'nearest',
162-
intersect: false,
163-
callbacks: {
164-
beforeBody: (context) => context
165-
.map(item => `${item.dataset.label}: ${1 < 1 ? '~' : ''}${item.formattedValue+'%'}`)
166-
.join(', '),
167-
label: () => null,
168-
},
169-
},
170-
},
171-
},
172-
}
173-
)
202+
let chart = createChart.call(this, 'line', 'CPU', '#d5e80d', config.readings[config.containerName].docker_cpu);
174203
175204
Livewire.on('container-chart-update', ({graph}) => {
176-
if (chart === undefined) {
177-
return
178-
}
179-
180-
if (graph === undefined && chart) {
181-
chart.destroy()
182-
chart = undefined
183-
return
184-
}
185-
186-
chart.data.labels = this.labels(graph[config.containerName])
187-
chart.options.scales.y.max = this.highest(graph[config.containerName])
188-
chart.data.datasets[0].data = this.scale(graph[config.containerName].docker_cpu)
189-
chart.update()
190-
})
205+
updateChart.call(this, chart, graph, config.containerName, 'docker_cpu');
206+
});
191207
},
192208
labels(readings) {
193-
return Object.keys(readings)
194-
209+
return Object.keys(readings);
195210
},
196211
scale(data) {
197-
return data
212+
return data;
198213
},
199214
highest(readings) {
200-
return Math.max(...Object.values(readings).map(dataset => Math.max(...Object.values(dataset)))) * (1 / 1)
201-
}
202-
}))
215+
return Math.max(...Object.values(readings).map(dataset => Math.max(...Object.values(dataset)))) * (1 / 1);
216+
},
217+
}));
203218
204219
Alpine.data('memoryChart', (config) => ({
205220
containerName: config.containerName,
206221
containerIndex: config.containerIndex,
207222
init() {
208-
let memory_chart = new Chart(
209-
this.$refs.canvas,
210-
{
211-
type: 'line',
212-
data: {
213-
labels: this.labels(config.readings),
214-
datasets: [
215-
{
216-
label: 'MEMORY',
217-
borderColor: '#31D70D',
218-
data: this.scale(config.readings[config.containerName].docker_memory),
219-
order: 1,
220-
}
221-
],
222-
},
223-
options: {
224-
maintainAspectRatio: false,
225-
layout: {
226-
autoPadding: false,
227-
padding: {
228-
top: 1,
229-
},
230-
},
231-
datasets: {
232-
line: {
233-
borderWidth: 2,
234-
borderCapStyle: 'round',
235-
pointHitRadius: 10,
236-
pointStyle: false,
237-
tension: 0.2,
238-
spanGaps: false,
239-
segment: {
240-
borderColor: (ctx) => ctx.p0.raw === 0 && ctx.p1.raw === 0 ? 'transparent' : undefined,
241-
}
242-
}
243-
},
244-
scales: {
245-
x: {
246-
display: false,
247-
},
248-
y: {
249-
display: false,
250-
min: 0,
251-
max: this.highest(config.readings),
252-
},
253-
},
254-
plugins: {
255-
legend: {
256-
display: false,
257-
},
258-
tooltip: {
259-
mode: 'index',
260-
position: 'nearest',
261-
intersect: false,
262-
callbacks: {
263-
beforeBody: (context) => context
264-
.map(item => `${item.dataset.label}: ${1 < 1 ? '~' : ''}${item.formattedValue+"%"}`)
265-
.join(', '),
266-
label: () => null,
267-
},
268-
},
269-
},
270-
},
271-
}
272-
)
223+
let memoryChart = createChart.call(this, 'line', 'MEMORY', '#31D70D', config.readings[config.containerName].docker_memory);
273224
274225
Livewire.on('container-chart-update', ({graph}) => {
275-
if (memory_chart === undefined) {
276-
return
277-
}
278-
if (graph === undefined && memory_chart) {
279-
memory_chart.destroy()
280-
memory_chart = undefined
281-
return
282-
}
283-
284-
memory_chart.data.labels = this.labels(graph[config.containerName])
285-
memory_chart.options.scales.y.max = this.highest(graph[config.containerName])
286-
memory_chart.data.datasets[0].data = this.scale(graph[config.containerName].docker_memory)
287-
memory_chart.update()
288-
})
226+
updateChart.call(this, memoryChart, graph, config.containerName, 'docker_memory');
227+
});
289228
},
290229
labels(readings) {
291-
return Object.keys(readings)
230+
return Object.keys(readings);
292231
},
293232
scale(data) {
294-
return data
233+
return data;
295234
},
296235
highest(readings) {
297-
return Math.max(...Object.values(readings).map(dataset => Math.max(...Object.values(dataset)))) * (1 / 1)
298-
}
299-
}))
236+
return Math.max(...Object.values(readings).map(dataset => Math.max(...Object.values(dataset)))) * (1 / 1);
237+
},
238+
}));
239+
300240
</script>
301241
@endscript
302242

0 commit comments

Comments
 (0)