feat: charts

This commit is contained in:
Andras Bacsai 2024-06-17 14:21:27 +02:00
parent 1ae6106782
commit 1d0a1ab16a
10 changed files with 160 additions and 8 deletions

View File

@ -15,7 +15,7 @@ public function handle(Server $server, $version = 'latest', bool $restart = fals
instant_remote_process(['docker rm -f coolify-sentinel'], $server, false);
}
instant_remote_process([
"docker run --rm --pull always -d -e \"SCHEDULER=true\" --name coolify-sentinel -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify/metrics:/app/metrics -v /data/coolify/logs:/app/logs --pid host --health-cmd \"curl --fail http://127.0.0.1:8888/api/health || exit 1\" --health-interval 10s --health-retries 3 ghcr.io/coollabsio/sentinel:$version",
"docker run --rm --pull always -d -e \"SCHEDULER=true\" -e \"METRICS_HISTORY=10\" -e \"REFRESH_RATE=5\" --name coolify-sentinel -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify/metrics:/app/metrics -v /data/coolify/logs:/app/logs --pid host --health-cmd \"curl --fail http://127.0.0.1:8888/api/health || exit 1\" --health-interval 10s --health-retries 3 ghcr.io/coollabsio/sentinel:$version",
'chown -R 9999:root /data/coolify/metrics /data/coolify/logs',
'chmod -R 700 /data/coolify/metrics /data/coolify/logs',
], $server, false);

View File

@ -36,7 +36,10 @@ public function handle(): void
{
try {
$version = get_latest_sentinel_version();
if (! $version) {
if (isDev()) {
$version = "0.0.5";
}
if (!$version) {
ray('Failed to get latest Sentinel version');
return;
@ -52,7 +55,7 @@ public function handle(): void
}
ray('Sentinel image is up to date');
} catch (\Throwable $e) {
send_internal_notification('PullSentinelImageJob failed with: '.$e->getMessage());
send_internal_notification('PullSentinelImageJob failed with: ' . $e->getMessage());
ray($e->getMessage());
throw $e;
}

View File

@ -0,0 +1,33 @@
<?php
namespace App\Livewire\Charts;
use App\Models\Server as ModelsServer;
use Livewire\Component;
class Server extends Component
{
public ModelsServer $server;
public $chartId = 'server';
public $data;
public $categories;
public function render()
{
return view('livewire.charts.server');
}
public function mount()
{
$this->loadData();
}
public function loadData()
{
$metrics = $this->server->getMetrics();
$metrics = collect($metrics)->map(function ($metric) {
return [$metric[0], $metric[1]];
});
$this->dispatch("refreshChartData-{$this->chartId}", [
'seriesData' => $metrics,
]);
}
}

View File

@ -487,7 +487,6 @@ public function getMetrics()
$parsedCollection = collect($cpu)->flatMap(function ($item) {
return collect(explode("\n", trim($item)))->map(function ($line) {
[$time, $value] = explode(',', trim($line));
return [(int) $time, (float) $value];
});
})->toArray();

View File

@ -0,0 +1,30 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class ApexCharts extends Component
{
public string $chartId;
public $seriesData;
public $categories;
public $seriesName;
public function __construct($chartId, $seriesData, $categories, $seriesName = '')
{
$this->chartId = $chartId;
$this->seriesData = $seriesData;
$this->categories = $categories;
$this->seriesName = $seriesName ?? 'Series';
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.apex-charts');
}
}

View File

@ -0,0 +1,78 @@
<div wire:ignore id="{!! $chartId !!}"></div>
<script>
const options = {
chart: {
height: '150px',
id: '{!! $chartId !!}',
type: 'area',
stroke: {
curve: 'straight',
},
toolbar: {
show: false,
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false
},
},
animations: {
enabled: false,
},
},
grid: {
show: true,
borderColor: '',
},
colors: ['red'],
xaxis: {
type: 'datetime',
labels: {
show: true,
style: {
colors: '#ffffff',
}
}
},
yaxis: {
show: true,
labels: {
show: false,
}
},
series: [{
name: '{!! $seriesName !!}',
data: '{!! $seriesData !!}'
}],
noData: {
text: 'Loading...'
},
tooltip: {
enabled: false
},
legend: {
show: false
}
}
const chart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), options);
chart.render();
document.addEventListener('livewire:init', () => {
Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
chart.updateOptions({
series: [{
data: chartData[0].seriesData,
}],
});
});
});
</script>

View File

@ -38,6 +38,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/8.3.0/pusher.min.js"
integrity="sha512-tXL5mrkSoP49uQf2jO0LbvzMyFgki//znmq0wYXGq94gVF6TU0QlrSbwGuPpKTeN1mIjReeqKZ4/NJPjHN1d2Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@endauth
</head>
@section('body')

View File

@ -0,0 +1,4 @@
<div wire:poll.5000ms='loadData'>
<h1>CPU Usage</h1>
<x-apex-charts :chart-id="$chartId" :series-data="$data" :categories="$categories" series-name="Total distance this year"/>
</div>

View File

@ -39,9 +39,9 @@
Add Resource</span>
</a>
<a class="hover:underline"
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
Settings
</a>
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
Settings
</a>
</div>
</div>
</div>
@ -161,7 +161,6 @@
</div>
@endif
<script>
function gotoProject(uuid, environment = 'production') {
window.location.href = '/project/' + uuid + '/' + environment;

View File

@ -5,4 +5,9 @@
<x-server.navbar :server="$server" :parameters="$parameters" />
<livewire:server.form :server="$server" />
<livewire:server.delete :server="$server" />
@if (isDev())
<div class="pt-10">
<livewire:charts.server :server="$server" />
</div>
@endif
</div>