rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed Sentinel metrics color from yellow to blue + cyan (cpu + memory)

Browse source
This commit is contained in:
ShadowArcanist 2025-09-19 16:26:11 +05:30
parent b64de1b5cd
commit 65f24de101
3 changed files with 75 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/views/layouts/base.blade.php
View file

@ -138,7 +138,8 @@
} }
} }
let theme = localStorage.theme let theme = localStorage.theme
let baseColor = '#FCD452' let cpuColor = '#1e90ff'
let ramColor = '#00ced1'
let textColor = '#ffffff' let textColor = '#ffffff'
let editorBackground = '#181818' let editorBackground = '#181818'
let editorTheme = 'blackboard' let editorTheme = 'blackboard'
@ -149,12 +150,14 @@ function checkTheme() {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
} }
if (theme == 'dark') { if (theme == 'dark') {
baseColor = '#FCD452' cpuColor = '#1e90ff'
ramColor = '#00ced1'
textColor = '#ffffff' textColor = '#ffffff'
editorBackground = '#181818' editorBackground = '#181818'
editorTheme = 'blackboard' editorTheme = 'blackboard'
} else { } else {
baseColor = 'black' cpuColor = '#1e90ff'
ramColor = '#00ced1'
textColor = '#000000' textColor = '#000000'
editorBackground = '#ffffff' editorBackground = '#ffffff'
editorTheme = null editorTheme = null

74
resources/views/livewire/project/shared/metrics.blade.php
View file

@ -34,6 +34,7 @@ class="pt-5">
const optionsServerCpu = { const optionsServerCpu = {
stroke: { stroke: {
curve: 'straight', curve: 'straight',
width: 2,
}, },
chart: { chart: {
height: '150px', height: '150px',
@ -68,16 +69,16 @@ class="pt-5">
enabled: false, enabled: false,
} }
}, },
grid: { grid: {
show: true, show: true,
borderColor: '', borderColor: '',
}, },
colors: [baseColor], colors: [cpuColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
}, },
series: [{ series: [{
name: "CPU %", name: "CPU %",
data: [] data: []
}], }],
noData: { noData: {
@ -101,11 +102,11 @@ class="pt-5">
document.addEventListener('livewire:init', () => { document.addEventListener('livewire:init', () => {
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => { Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
checkTheme(); checkTheme();
serverCpuChart.updateOptions({ serverCpuChart.updateOptions({
series: [{ series: [{
data: chartData[0].seriesData, data: chartData[0].seriesData,
}], }],
colors: [baseColor], colors: [cpuColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
labels: { labels: {
@ -143,6 +144,7 @@ class="pt-5">
const optionsServerMemory = { const optionsServerMemory = {
stroke: { stroke: {
curve: 'straight', curve: 'straight',
width: 2,
}, },
chart: { chart: {
height: '150px', height: '150px',
@ -177,22 +179,22 @@ class="pt-5">
enabled: false, enabled: false,
} }
}, },
grid: { grid: {
show: true, show: true,
borderColor: '', borderColor: '',
}, },
colors: [baseColor], colors: [ramColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
labels: { labels: {
show: true, show: true,
style: { style: {
colors: textColor, colors: textColor,
} }
} }
}, },
series: [{ series: [{
name: "Memory (MB)", name: "Memory (MB)",
data: [] data: []
}], }],
noData: { noData: {
@ -217,11 +219,11 @@ class="pt-5">
document.addEventListener('livewire:init', () => { document.addEventListener('livewire:init', () => {
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => { Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
checkTheme(); checkTheme();
serverMemoryChart.updateOptions({ serverMemoryChart.updateOptions({
series: [{ series: [{
data: chartData[0].seriesData, data: chartData[0].seriesData,
}], }],
colors: [baseColor], colors: [ramColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
labels: { labels: {

60
resources/views/livewire/server/charts.blade.php
View file

@ -27,6 +27,7 @@
const optionsServerCpu = { const optionsServerCpu = {
stroke: { stroke: {
curve: 'straight', curve: 'straight',
width: 2,
}, },
chart: { chart: {
height: '150px', height: '150px',
@ -61,16 +62,16 @@
enabled: false, enabled: false,
} }
}, },
grid: { grid: {
show: true, show: true,
borderColor: '', borderColor: '',
}, },
colors: [baseColor], colors: [cpuColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
}, },
series: [{ series: [{
name: 'CPU %', name: 'CPU %',
data: [] data: []
}], }],
noData: { noData: {
@ -95,11 +96,11 @@
document.addEventListener('livewire:init', () => { document.addEventListener('livewire:init', () => {
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => { Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
checkTheme(); checkTheme();
serverCpuChart.updateOptions({ serverCpuChart.updateOptions({
series: [{ series: [{
data: chartData[0].seriesData, data: chartData[0].seriesData,
}], }],
colors: [baseColor], colors: [cpuColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
labels: { labels: {
@ -138,6 +139,7 @@
const optionsServerMemory = { const optionsServerMemory = {
stroke: { stroke: {
curve: 'straight', curve: 'straight',
width: 2,
}, },
chart: { chart: {
height: '150px', height: '150px',
@ -172,15 +174,15 @@
enabled: false, enabled: false,
} }
}, },
grid: { grid: {
show: true, show: true,
borderColor: '', borderColor: '',
}, },
colors: [baseColor], colors: [ramColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
labels: { labels: {
show: true, show: true,
style: { style: {
colors: textColor, colors: textColor,
} }
@ -212,11 +214,11 @@
document.addEventListener('livewire:init', () => { document.addEventListener('livewire:init', () => {
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => { Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
checkTheme(); checkTheme();
serverMemoryChart.updateOptions({ serverMemoryChart.updateOptions({
series: [{ series: [{
data: chartData[0].seriesData, data: chartData[0].seriesData,
}], }],
colors: [baseColor], colors: [ramColor],
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
labels: { labels: {