f1dc6d59fa
Replace #6b16ed (Coolify purple) with #d52b1e (MapleDeploy red) and form focus states, dirty indicators, chart colors, and theme tokens. Also fix warning color scale to use standard Tailwind yellow values.
315 lines
17 KiB
PHP
315 lines
17 KiB
PHP
<div>
|
|
<x-slot:title>
|
|
{{ data_get_str($server, 'name')->limit(10) }} > Metrics | MapleDeploy
|
|
</x-slot>
|
|
<livewire:server.navbar :server="$server" />
|
|
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
|
<x-server.sidebar :server="$server" activeMenu="metrics" />
|
|
<div class="w-full">
|
|
<div class="flex items-center gap-2">
|
|
<h2>Metrics</h2>
|
|
@if ($server->isMetricsEnabled())
|
|
<x-forms.button canGate="update" :canResource="$server" wire:click='toggleMetrics'>
|
|
Disable Metrics
|
|
</x-forms.button>
|
|
@elseif ($server->isSentinelEnabled())
|
|
<x-forms.button canGate="update" :canResource="$server" isHighlighted wire:click='toggleMetrics'>
|
|
Enable Metrics
|
|
</x-forms.button>
|
|
@endif
|
|
</div>
|
|
<div class="pb-4">Basic metrics for your server.</div>
|
|
@if ($server->isMetricsEnabled())
|
|
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
|
|
<x-forms.select label="Interval" wire:change="setInterval" id="interval">
|
|
<option value="5">5 minutes (live)</option>
|
|
<option value="10">10 minutes (live)</option>
|
|
<option value="30">30 minutes</option>
|
|
<option value="60">1 hour</option>
|
|
<option value="720">12 hours</option>
|
|
<option value="10080">1 week</option>
|
|
<option value="43200">30 days</option>
|
|
</x-forms.select>
|
|
<h4 class="pt-4">CPU Usage</h4>
|
|
<div wire:ignore id="{!! $chartId !!}-cpu"></div>
|
|
|
|
<script>
|
|
(function() {
|
|
checkTheme();
|
|
const optionsServerCpu = {
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 2,
|
|
},
|
|
chart: {
|
|
height: '150px',
|
|
id: '{!! $chartId !!}-cpu',
|
|
type: 'area',
|
|
toolbar: {
|
|
show: true,
|
|
tools: {
|
|
download: false,
|
|
selection: false,
|
|
zoom: true,
|
|
zoomin: false,
|
|
zoomout: false,
|
|
pan: false,
|
|
reset: true
|
|
},
|
|
},
|
|
animations: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
offsetY: -10,
|
|
style: {
|
|
colors: ['#fde047'],
|
|
},
|
|
background: {
|
|
enabled: false,
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '',
|
|
},
|
|
colors: [cpuColor],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
},
|
|
series: [{
|
|
name: 'CPU %',
|
|
data: []
|
|
}],
|
|
noData: {
|
|
text: 'Loading...',
|
|
style: {
|
|
color: textColor,
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
marker: {
|
|
show: false,
|
|
},
|
|
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
|
const value = series[seriesIndex][dataPointIndex];
|
|
const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
|
|
const date = new Date(timestamp);
|
|
const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
|
|
String(date.getUTCMinutes()).padStart(2, '0') + ':' +
|
|
String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
|
|
date.getUTCFullYear() + '-' +
|
|
String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
|
|
String(date.getUTCDate()).padStart(2, '0');
|
|
return '<div class="apexcharts-tooltip-custom">' +
|
|
'<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
|
|
'<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
|
|
'</div>';
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
}
|
|
const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
|
|
optionsServerCpu);
|
|
serverCpuChart.render();
|
|
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
|
|
checkTheme();
|
|
serverCpuChart.updateOptions({
|
|
series: [{
|
|
data: chartData[0].seriesData,
|
|
}],
|
|
colors: [cpuColor],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: textColor,
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: textColor,
|
|
},
|
|
formatter: function(value) {
|
|
return Math.round(value) + ' %';
|
|
}
|
|
}
|
|
},
|
|
noData: {
|
|
text: 'Loading...',
|
|
style: {
|
|
color: textColor,
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<div>
|
|
<h4>Memory Usage</h4>
|
|
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
|
|
|
<script>
|
|
(function() {
|
|
checkTheme();
|
|
const optionsServerMemory = {
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 2,
|
|
},
|
|
chart: {
|
|
height: '150px',
|
|
id: '{!! $chartId !!}-memory',
|
|
type: 'area',
|
|
toolbar: {
|
|
show: true,
|
|
tools: {
|
|
download: false,
|
|
selection: false,
|
|
zoom: true,
|
|
zoomin: false,
|
|
zoomout: false,
|
|
pan: false,
|
|
reset: true
|
|
},
|
|
},
|
|
animations: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
offsetY: -10,
|
|
style: {
|
|
colors: ['#fde047'],
|
|
},
|
|
background: {
|
|
enabled: false,
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '',
|
|
},
|
|
colors: [ramColor],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: textColor,
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: "Memory (%)",
|
|
data: []
|
|
}],
|
|
noData: {
|
|
text: 'Loading...',
|
|
style: {
|
|
color: textColor,
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
marker: {
|
|
show: false,
|
|
},
|
|
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
|
const value = series[seriesIndex][dataPointIndex];
|
|
const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
|
|
const date = new Date(timestamp);
|
|
const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
|
|
String(date.getUTCMinutes()).padStart(2, '0') + ':' +
|
|
String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
|
|
date.getUTCFullYear() + '-' +
|
|
String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
|
|
String(date.getUTCDate()).padStart(2, '0');
|
|
return '<div class="apexcharts-tooltip-custom">' +
|
|
'<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
|
|
'<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
|
|
'</div>';
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
}
|
|
const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
|
|
optionsServerMemory);
|
|
serverMemoryChart.render();
|
|
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
|
|
checkTheme();
|
|
serverMemoryChart.updateOptions({
|
|
series: [{
|
|
data: chartData[0].seriesData,
|
|
}],
|
|
colors: [ramColor],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: textColor,
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
show: true,
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: textColor,
|
|
},
|
|
formatter: function(value) {
|
|
return Math.round(value) + ' %';
|
|
}
|
|
}
|
|
},
|
|
noData: {
|
|
text: 'Loading...',
|
|
style: {
|
|
color: textColor,
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
@else
|
|
@if ($server->isSentinelEnabled())
|
|
<x-callout type="info" title="Metrics Disabled">
|
|
Metrics are disabled for this server. Click "Enable Metrics" above to start collecting metrics.
|
|
</x-callout>
|
|
@else
|
|
<x-callout type="info" title="Sentinel Required">
|
|
Metrics require Sentinel to be enabled.
|
|
Please <a class="underline font-semibold" href="{{ route('server.sentinel', ['server_uuid' => $server->uuid]) }}" {{ wireNavigate() }}>enable Sentinel</a> first.
|
|
</x-callout>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|