fix ui
This commit is contained in:
Andras Bacsai
@@ -1,4 +1,7 @@
|
|||||||
<div>
|
<div>
|
||||||
|
<x-slot:title>
|
||||||
|
{{ data_get_str($server, 'name')->limit(10) }} > Advanced | Coolify
|
||||||
|
</x-slot>
|
||||||
<x-server.navbar :server="$server" />
|
<x-server.navbar :server="$server" />
|
||||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
|
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
|
||||||
<x-server.sidebar :server="$server" activeMenu="advanced" />
|
<x-server.sidebar :server="$server" activeMenu="advanced" />
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<x-slot:title>
|
<x-slot:title>
|
||||||
{{ data_get_str($server, 'name')->limit(10) }} > Server Destinations | Coolify
|
{{ data_get_str($server, 'name')->limit(10) }} > Metrics | Coolify
|
||||||
</x-slot>
|
</x-slot>
|
||||||
<x-server.navbar :server="$server" />
|
<x-server.navbar :server="$server" />
|
||||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||||
@@ -8,139 +8,29 @@
|
|||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<h2>Metrics</h2>
|
<h2>Metrics</h2>
|
||||||
<div class="pb-4">Basic metrics for your container.</div>
|
<div class="pb-4">Basic metrics for your container.</div>
|
||||||
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
|
@if ($server->isMetricsEnabled())
|
||||||
<x-forms.select label="Interval" wire:change="setInterval" id="interval">
|
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
|
||||||
<option value="5">5 minutes (live)</option>
|
<x-forms.select label="Interval" wire:change="setInterval" id="interval">
|
||||||
<option value="10">10 minutes (live)</option>
|
<option value="5">5 minutes (live)</option>
|
||||||
<option value="30">30 minutes</option>
|
<option value="10">10 minutes (live)</option>
|
||||||
<option value="60">1 hour</option>
|
<option value="30">30 minutes</option>
|
||||||
<option value="720">12 hours</option>
|
<option value="60">1 hour</option>
|
||||||
<option value="10080">1 week</option>
|
<option value="720">12 hours</option>
|
||||||
<option value="43200">30 days</option>
|
<option value="10080">1 week</option>
|
||||||
</x-forms.select>
|
<option value="43200">30 days</option>
|
||||||
<h4 class="pt-4">CPU (%)</h4>
|
</x-forms.select>
|
||||||
<div wire:ignore id="{!! $chartId !!}-cpu"></div>
|
<h4 class="pt-4">CPU (%)</h4>
|
||||||
|
<div wire:ignore id="{!! $chartId !!}-cpu"></div>
|
||||||
<script>
|
|
||||||
checkTheme();
|
|
||||||
const optionsServerCpu = {
|
|
||||||
stroke: {
|
|
||||||
curve: 'straight',
|
|
||||||
},
|
|
||||||
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: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: 'gradient',
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
offsetY: -10,
|
|
||||||
style: {
|
|
||||||
colors: ['#FCD452'],
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
enabled: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
show: true,
|
|
||||||
borderColor: '',
|
|
||||||
},
|
|
||||||
colors: [baseColor],
|
|
||||||
xaxis: {
|
|
||||||
type: 'datetime',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: 'CPU %',
|
|
||||||
data: []
|
|
||||||
}],
|
|
||||||
noData: {
|
|
||||||
text: 'Loading...',
|
|
||||||
style: {
|
|
||||||
color: textColor,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: true,
|
|
||||||
marker: {
|
|
||||||
show: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
|
|
||||||
optionsServerCpu);
|
|
||||||
serverCpuChart.render();
|
|
||||||
document.addEventListener('livewire:init', () => {
|
|
||||||
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
|
|
||||||
checkTheme();
|
|
||||||
serverCpuChart.updateOptions({
|
|
||||||
series: [{
|
|
||||||
data: chartData[0].seriesData,
|
|
||||||
}],
|
|
||||||
colors: [baseColor],
|
|
||||||
xaxis: {
|
|
||||||
type: 'datetime',
|
|
||||||
labels: {
|
|
||||||
show: true,
|
|
||||||
style: {
|
|
||||||
colors: textColor,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
show: true,
|
|
||||||
labels: {
|
|
||||||
show: true,
|
|
||||||
style: {
|
|
||||||
colors: textColor,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
noData: {
|
|
||||||
text: 'Loading...',
|
|
||||||
style: {
|
|
||||||
color: textColor,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4>Memory (%)</h4>
|
|
||||||
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
checkTheme();
|
checkTheme();
|
||||||
const optionsServerMemory = {
|
const optionsServerCpu = {
|
||||||
stroke: {
|
stroke: {
|
||||||
curve: 'straight',
|
curve: 'straight',
|
||||||
},
|
},
|
||||||
chart: {
|
chart: {
|
||||||
height: '150px',
|
height: '150px',
|
||||||
id: '{!! $chartId !!}-memory',
|
id: '{!! $chartId !!}-cpu',
|
||||||
type: 'area',
|
type: 'area',
|
||||||
toolbar: {
|
toolbar: {
|
||||||
show: true,
|
show: true,
|
||||||
@@ -178,15 +68,9 @@
|
|||||||
colors: [baseColor],
|
colors: [baseColor],
|
||||||
xaxis: {
|
xaxis: {
|
||||||
type: 'datetime',
|
type: 'datetime',
|
||||||
labels: {
|
|
||||||
show: true,
|
|
||||||
style: {
|
|
||||||
colors: textColor,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
series: [{
|
series: [{
|
||||||
name: "Memory (%)",
|
name: 'CPU %',
|
||||||
data: []
|
data: []
|
||||||
}],
|
}],
|
||||||
noData: {
|
noData: {
|
||||||
@@ -205,13 +89,13 @@
|
|||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
|
const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
|
||||||
optionsServerMemory);
|
optionsServerCpu);
|
||||||
serverMemoryChart.render();
|
serverCpuChart.render();
|
||||||
document.addEventListener('livewire:init', () => {
|
document.addEventListener('livewire:init', () => {
|
||||||
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
|
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
|
||||||
checkTheme();
|
checkTheme();
|
||||||
serverMemoryChart.updateOptions({
|
serverCpuChart.updateOptions({
|
||||||
series: [{
|
series: [{
|
||||||
data: chartData[0].seriesData,
|
data: chartData[0].seriesData,
|
||||||
}],
|
}],
|
||||||
@@ -226,7 +110,6 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
yaxis: {
|
yaxis: {
|
||||||
min: 0,
|
|
||||||
show: true,
|
show: true,
|
||||||
labels: {
|
labels: {
|
||||||
show: true,
|
show: true,
|
||||||
@@ -246,8 +129,129 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4>Memory (%)</h4>
|
||||||
|
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
checkTheme();
|
||||||
|
const optionsServerMemory = {
|
||||||
|
stroke: {
|
||||||
|
curve: 'straight',
|
||||||
|
},
|
||||||
|
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: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: 'gradient',
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
offsetY: -10,
|
||||||
|
style: {
|
||||||
|
colors: ['#FCD452'],
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
enabled: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: true,
|
||||||
|
borderColor: '',
|
||||||
|
},
|
||||||
|
colors: [baseColor],
|
||||||
|
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,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
|
||||||
|
optionsServerMemory);
|
||||||
|
serverMemoryChart.render();
|
||||||
|
document.addEventListener('livewire:init', () => {
|
||||||
|
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
|
||||||
|
checkTheme();
|
||||||
|
serverMemoryChart.updateOptions({
|
||||||
|
series: [{
|
||||||
|
data: chartData[0].seriesData,
|
||||||
|
}],
|
||||||
|
colors: [baseColor],
|
||||||
|
xaxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
style: {
|
||||||
|
colors: textColor,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
min: 0,
|
||||||
|
show: true,
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
style: {
|
||||||
|
colors: textColor,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
noData: {
|
||||||
|
text: 'Loading...',
|
||||||
|
style: {
|
||||||
|
color: textColor,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
@else
|
||||||
|
<div>Metrics are disabled for this server.</div>
|
||||||
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<x-slot:title>
|
<x-slot:title>
|
||||||
{{ data_get_str($server, 'name')->limit(10) }} > Server Destinations | Coolify
|
{{ data_get_str($server, 'name')->limit(10) }} > Destinations | Coolify
|
||||||
</x-slot>
|
</x-slot>
|
||||||
<x-server.navbar :server="$server" />
|
<x-server.navbar :server="$server" />
|
||||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<x-slot:title>
|
<x-slot:title>
|
||||||
{{ data_get_str($server, 'name')->limit(10) }} > Server Log Drains | Coolify
|
{{ data_get_str($server, 'name')->limit(10) }} > Log Drains | Coolify
|
||||||
</x-slot>
|
</x-slot>
|
||||||
<x-server.navbar :server="$server" />
|
<x-server.navbar :server="$server" />
|
||||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<x-slot:title>
|
<x-slot:title>
|
||||||
{{ data_get_str($server, 'name')->limit(10) }} > Server Connection | Coolify
|
{{ data_get_str($server, 'name')->limit(10) }} > Private Key | Coolify
|
||||||
</x-slot>
|
</x-slot>
|
||||||
<x-server.navbar :server="$server" />
|
<x-server.navbar :server="$server" />
|
||||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<x-slot:title>
|
<x-slot:title>
|
||||||
{{ data_get_str($server, 'name')->limit(10) }} > Server Configurations | Coolify
|
{{ data_get_str($server, 'name')->limit(10) }} > General | Coolify
|
||||||
</x-slot>
|
</x-slot>
|
||||||
<x-server.navbar :server="$server" />
|
<x-server.navbar :server="$server" />
|
||||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||||
|
|||||||
Reference in New Issue
Block a user