Skip to content

Commit

Permalink
fix ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrasbacsai
andrasbacsai committed Nov 3, 2024
1 parent 38fad7e commit 46c218d
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 144 deletions.
3 changes: 3 additions & 0 deletions resources/views/livewire/server/advanced.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<div>
<x-slot:title>
{{ data_get_str($server, 'name')->limit(10) }} > Advanced | Coolify
</x-slot>
<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">
<x-server.sidebar :server="$server" activeMenu="advanced" />
Expand Down
284 changes: 144 additions & 140 deletions resources/views/livewire/server/charts.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,146 +1,36 @@
<div>
<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-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">
<h2>Metrics</h2>
<div class="pb-4">Basic metrics for your container.</div>
<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 (%)</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>
@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 (%)</h4>
<div wire:ignore id="{!! $chartId !!}-cpu"></div>

<script>
checkTheme();
const optionsServerMemory = {
const optionsServerCpu = {
stroke: {
curve: 'straight',
},
chart: {
height: '150px',
id: '{!! $chartId !!}-memory',
id: '{!! $chartId !!}-cpu',
type: 'area',
toolbar: {
show: true,
Expand Down Expand Up @@ -178,15 +68,9 @@
colors: [baseColor],
xaxis: {
type: 'datetime',
labels: {
show: true,
style: {
colors: textColor,
}
}
},
series: [{
name: "Memory (%)",
name: 'CPU %',
data: []
}],
noData: {
Expand All @@ -205,13 +89,13 @@
show: false
}
}
const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
optionsServerMemory);
serverMemoryChart.render();
const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
optionsServerCpu);
serverCpuChart.render();
document.addEventListener('livewire:init', () => {
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
checkTheme();
serverMemoryChart.updateOptions({
serverCpuChart.updateOptions({
series: [{
data: chartData[0].seriesData,
}],
Expand All @@ -226,7 +110,6 @@
}
},
yaxis: {
min: 0,
show: true,
labels: {
show: true,
Expand All @@ -246,8 +129,129 @@
});
</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>
@else
<div>Metrics are disabled for this server.</div>
@endif
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion resources/views/livewire/server/destination/show.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
<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-server.navbar :server="$server" />
<div class="flex flex-col h-full gap-8 sm:flex-row">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/server/log-drains.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
<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-server.navbar :server="$server" />
<div class="flex flex-col h-full gap-8 sm:flex-row">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/server/private-key/show.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
<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-server.navbar :server="$server" />
<div class="flex flex-col h-full gap-8 sm:flex-row">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/server/show.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
<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-server.navbar :server="$server" />
<div class="flex flex-col h-full gap-8 sm:flex-row">
Expand Down

0 comments on commit 46c218d

Please sign in to comment.