Merge branch 'next' into feat/monaco-editor
This commit is contained in:
Mahdi Taleghani
@@ -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')
|
||||
@@ -59,6 +60,20 @@
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
let theme = localStorage.theme
|
||||
let baseColor = '#FCD452'
|
||||
let textColor = '#ffffff'
|
||||
|
||||
function checkTheme() {
|
||||
theme = localStorage.theme
|
||||
if (theme == 'dark') {
|
||||
baseColor = '#FCD452'
|
||||
textColor = '#ffffff'
|
||||
} else {
|
||||
baseColor = 'black'
|
||||
textColor = '#000000'
|
||||
}
|
||||
}
|
||||
@auth
|
||||
window.Pusher = Pusher;
|
||||
window.Echo = new Echo({
|
||||
|
||||
@@ -23,9 +23,7 @@
|
||||
<div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
|
||||
@foreach ($projects as $project)
|
||||
<div class="gap-2 border border-transparent cursor-pointer box group"
|
||||
@if (data_get($project, 'environments')->count() === 1) onclick="gotoProject('{{ data_get($project, 'uuid') }}', '{{ data_get($project, 'environments.0.name', 'production') }}')"
|
||||
@else
|
||||
onclick="window.location.href = '{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}'" @endif>
|
||||
onclick="window.location.href = '{{ route('project.resource.index', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $project->default_environment()->name]) }}'">
|
||||
<div class="flex flex-1 mx-6">
|
||||
<div class="flex flex-col justify-center flex-1">
|
||||
<div class="box-title">{{ $project->name }}</div>
|
||||
@@ -39,9 +37,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 +159,6 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<script>
|
||||
function gotoProject(uuid, environment = 'production') {
|
||||
window.location.href = '/project/' + uuid + '/' + environment;
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<x-forms.button type="submit">Validate 2FA</x-forms.button>
|
||||
</form>
|
||||
<div>
|
||||
<div>{!! request()->user()->twoFactorQrCodeSvg() !!}</div>
|
||||
<div class="flex items-center justify-center w-64 h-64 bg-transparent">{!! request()->user()->twoFactorQrCodeSvg() !!}</div>
|
||||
<div x-data="{ showCode: false }" class="py-2">
|
||||
<template x-if="showCode">
|
||||
<div class="py-2 ">{!! decrypt(request()->user()->two_factor_secret) !!}</div>
|
||||
|
||||
@@ -74,6 +74,9 @@
|
||||
@click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
|
||||
href="#">Resource Operations
|
||||
</a>
|
||||
<a class="menu-item" :class="activeTab === 'metrics' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'metrics'; window.location.hash = 'metrics'" href="#">Metrics
|
||||
</a>
|
||||
<a class="menu-item" :class="activeTab === 'tags' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
|
||||
</a>
|
||||
@@ -126,6 +129,9 @@
|
||||
<div x-cloak x-show="activeTab === 'resource-operations'">
|
||||
<livewire:project.shared.resource-operations :resource="$application" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'metrics'">
|
||||
<livewire:project.shared.metrics :resource="$application" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'tags'">
|
||||
<livewire:project.shared.tags :resource="$application" />
|
||||
</div>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
{{ $deployment->status }}
|
||||
</div>
|
||||
@if (data_get($deployment, 'is_webhook') || data_get($deployment, 'pull_request_id'))
|
||||
<div class="flex gap-1">
|
||||
<div class="flex items-center gap-1">
|
||||
@if (data_get($deployment, 'is_webhook'))
|
||||
Webhook
|
||||
@endif
|
||||
@@ -55,12 +55,19 @@
|
||||
|
|
||||
@endif
|
||||
Pull Request #{{ data_get($deployment, 'pull_request_id') }}
|
||||
(SHA
|
||||
@if (data_get($deployment, 'commit'))
|
||||
{{ data_get($deployment, 'commit') }})
|
||||
@else
|
||||
HEAD)
|
||||
@endif
|
||||
@endif
|
||||
@if (data_get($deployment, 'commit'))
|
||||
<div class="dark:hover:text-white"
|
||||
x-on:click.stop="goto('{{ $application->gitCommitLink(data_get($deployment, 'commit')) }}')">
|
||||
<div class="text-xs underline">
|
||||
@if ($deployment->commitMessage())
|
||||
({{ data_get_str($deployment, 'commit')->limit(7) }} -
|
||||
{{ $deployment->commitMessage() }})
|
||||
@else
|
||||
{{ data_get_str($deployment, 'commit')->limit(7) }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
@@ -68,7 +75,11 @@
|
||||
@if (data_get($deployment, 'rollback') === true)
|
||||
Rollback
|
||||
@else
|
||||
Manual
|
||||
@if (data_get($deployment, 'is_api'))
|
||||
API
|
||||
@else
|
||||
Manual
|
||||
@endif
|
||||
@endif
|
||||
@if (data_get($deployment, 'commit'))
|
||||
<div class="dark:hover:text-white"
|
||||
@@ -98,7 +109,7 @@
|
||||
Finished <span x-text="measure_since_started()">0s</span> in
|
||||
<span class="font-bold" x-text="measure_finished_time()">0s</span>
|
||||
@else
|
||||
Running for <span class="font-bold" x-text="measure_since_started()">0s</span>
|
||||
Running for <span class="font-bold" x-text="measure_since_started()">0s</span>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
@if (decode_remote_command_output($application_deployment_queue)->count() > 0)
|
||||
@foreach (decode_remote_command_output($application_deployment_queue) as $line)
|
||||
<span @class([
|
||||
'dark:text-warning whitespace-pre-line' => $line['hidden'],
|
||||
'text-coollabs dark:text-warning whitespace-pre-line' => $line['hidden'],
|
||||
'text-red-500 font-bold whitespace-pre-line' => $line['type'] == 'stderr',
|
||||
])>[{{ $line['timestamp'] }}] @if ($line['hidden'])
|
||||
<br><br>[COMMAND] {{ $line['command'] }}<br>[OUTPUT]
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
Configure
|
||||
</x-forms.button>
|
||||
<x-forms.button
|
||||
wire:click="deploy('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
|
||||
wire:click="add_and_deploy('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
|
||||
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
||||
@@ -27,8 +27,7 @@
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository" readonly
|
||||
label="Repository" />
|
||||
<x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository" label="Repository" />
|
||||
<x-forms.input placeholder="main" id="application.git_branch" label="Branch" />
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
|
||||
@@ -42,6 +42,9 @@
|
||||
@click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
|
||||
href="#">Resource Operations
|
||||
</a>
|
||||
<a class="menu-item" :class="activeTab === 'metrics' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'metrics'; window.location.hash = 'metrics'" href="#">Metrics
|
||||
</a>
|
||||
<a class="menu-item" :class="activeTab === 'tags' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
|
||||
</a>
|
||||
@@ -92,6 +95,9 @@
|
||||
<div x-cloak x-show="activeTab === 'resource-operations'">
|
||||
<livewire:project.shared.resource-operations :resource="$database" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'metrics'">
|
||||
<livewire:project.shared.metrics :resource="$database" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'tags'">
|
||||
<livewire:project.shared.tags :resource="$database" />
|
||||
</div>
|
||||
|
||||
@@ -27,12 +27,6 @@
|
||||
<div class="flex items-center">
|
||||
<a class="text-xs truncate lg:text-sm"
|
||||
href="{{ route('project.resource.index', ['environment_name' => data_get($parameters, 'environment_name'), 'project_uuid' => data_get($parameters, 'project_uuid')]) }}">{{ data_get($parameters, 'environment_name') }}</a>
|
||||
<svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
@forelse ($projects as $project)
|
||||
<div class="box group" x-data x-on:click="goto('{{ $project->uuid }}')">
|
||||
<a class="flex flex-col justify-center flex-1 mx-6"
|
||||
href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
|
||||
href="{{ route('project.resource.index', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $project->default_environment()->name]) }}">
|
||||
<div class="box-title">{{ $project->name }}</div>
|
||||
<div class="box-description ">
|
||||
{{ $project->description }}</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex flex-col gap-4 lg:flex-row ">
|
||||
<h1>New Resource</h1>
|
||||
<div class="w-full pb-4 lg:w-96 lg:pb-0">
|
||||
<x-forms.select wire:model="selectedEnvironment">
|
||||
<x-forms.select wire:model.live="selectedEnvironment">
|
||||
@foreach ($environments as $environment)
|
||||
<option value="{{ $environment->name }}">Environment: {{ $environment->name }}</option>
|
||||
@endforeach
|
||||
@@ -533,7 +533,6 @@
|
||||
@if (file_exists(public_path(data_get($service, 'logo'))))
|
||||
<img class="w-[4.5rem] aspect-square h-[4.5rem] p-2 transition-all duration-200 opacity-30 grayscale group-hover:grayscale-0 group-hover:opacity-100 bg-neutral-300 dark:bg-transparent hover:bg-neutral-800"
|
||||
src="{{ asset(data_get($service, 'logo')) }}">
|
||||
|
||||
@endif
|
||||
</x-slot:logo>
|
||||
<x-slot:documentation>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<x-forms.select wire:model.live="selectedEnvironment">
|
||||
<option value="edit">Create/Edit Environments</option>
|
||||
<option disabled>-----</option>
|
||||
@foreach ($environments as $environment)
|
||||
<option value="{{ $environment->name }}">{{ $environment->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
@@ -21,7 +21,7 @@
|
||||
@endif
|
||||
<livewire:project.delete-environment :disabled="!$environment->isEmpty()" :environment_id="$environment->id" />
|
||||
</div>
|
||||
<nav class="flex pt-2 pb-10">
|
||||
<nav class="flex pt-2 pb-6">
|
||||
<ol class="flex items-center">
|
||||
<li class="inline-flex items-center">
|
||||
<a class="text-xs truncate lg:text-sm"
|
||||
@@ -36,15 +36,18 @@
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<a class="text-xs truncate lg:text-sm"
|
||||
href="{{ route('project.resource.index', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
|
||||
|
||||
<livewire:project.resource.environment-select :environments="$project->environments" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
@if ($environment->isEmpty())
|
||||
<a href="{{ route('project.resource.create', ['project_uuid' => request()->route('project_uuid'), 'environment_name' => request()->route('environment_name')]) }} "
|
||||
<a href="{{ route('project.resource.create', ['project_uuid' => request()->route('project_uuid'), 'environment_name' => request()->route('environment_name')]) }} "
|
||||
class="items-center justify-center box">+ Add New Resource</a>
|
||||
@else
|
||||
<div x-data="searchComponent()">
|
||||
|
||||
@@ -172,7 +172,8 @@
|
||||
<h2>Storages</h2>
|
||||
</div>
|
||||
<div class="pb-4">Persistent storage to preserve data between deployments.</div>
|
||||
<span class="dark:text-warning">Please modify storage layout in your Docker Compose file.</span>
|
||||
<div class="pb-4 dark:text-warning text-coollabs">If you would like to add a volume, you must add it to
|
||||
your compose file (General tab).</div>
|
||||
@foreach ($applications as $application)
|
||||
<livewire:project.service.storage wire:key="application-{{ $application->id }}"
|
||||
:resource="$application" />
|
||||
|
||||
@@ -2,11 +2,9 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Environment Variables</h2>
|
||||
@if ($resource->type() !== 'service')
|
||||
<x-modal-input buttonTitle="+ Add" title="New Environment Variable">
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
</x-modal-input>
|
||||
@endif
|
||||
<x-modal-input buttonTitle="+ Add" title="New Environment Variable">
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
</x-modal-input>
|
||||
<x-forms.button
|
||||
wire:click='switch'>{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</x-forms.button>
|
||||
</div>
|
||||
@@ -14,11 +12,22 @@
|
||||
@if ($this->resourceClass === 'App\Models\Application' && data_get($this->resource, 'build_pack') !== 'dockercompose')
|
||||
<div class="w-64 pt-2">
|
||||
<x-forms.checkbox id="resource.settings.is_env_sorting_enabled" label="Sort alphabetically"
|
||||
helper="Turn this off if one environment is dependent on an other. It will be sorted by creation order." instantSave></x-forms.checkbox>
|
||||
helper="Turn this off if one environment is dependent on an other. It will be sorted by creation order."
|
||||
instantSave></x-forms.checkbox>
|
||||
</div>
|
||||
@endif
|
||||
@if ($resource->type() === 'service' || $resource?->build_pack === 'dockercompose')
|
||||
<div class="pt-4 dark:text-warning text-coollabs">Hardcoded variables are not shown here.</div>
|
||||
<div class="flex items-center gap-1 pt-4 dark:text-warning text-coollabs">
|
||||
<svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor"
|
||||
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
|
||||
</path>
|
||||
</svg>
|
||||
Hardcoded variables are not shown here.
|
||||
</div>
|
||||
{{-- <div class="pb-4 dark:text-warning text-coollabs">If you would like to add a variable, you must add it to
|
||||
your compose file.</div> --}}
|
||||
@endif
|
||||
</div>
|
||||
@if ($view === 'normal')
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div>
|
||||
<form wire:submit='submit'
|
||||
class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300">
|
||||
@if (!$env->isFoundInCompose && !$isSharedVariable)
|
||||
{{-- @if (!$env->isFoundInCompose && !$isSharedVariable)
|
||||
<div class="flex items-center justify-center gap-2 dark:text-warning text-coollabs"> <svg
|
||||
class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -9,7 +9,7 @@
|
||||
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
|
||||
</path>
|
||||
</svg>This variable is not found in the compose file, so it won't be used.</div>
|
||||
@endif
|
||||
@endif --}}
|
||||
@if ($isLocked)
|
||||
<div class="flex flex-1 w-full gap-2">
|
||||
<x-forms.input disabled id="env.key" />
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
@forelse (data_get($server,'containers',[]) as $container)
|
||||
<livewire:project.shared.get-logs :server="$server" :resource="$resource" :container="data_get($container, 'Names')" />
|
||||
@empty
|
||||
<div class="pt-2">No containers are not running on server: {{ $server->name }}</div>
|
||||
<div class="pt-2">No containers are running on server: {{ $server->name }}</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
<div> No functional server found for the database.</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="pt-2">No containers are not running.</div>
|
||||
<div class="pt-2">No containers are running.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@elseif ($type === 'service')
|
||||
@@ -56,7 +56,7 @@
|
||||
<div> No functional server found for the service.</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="pt-2">No containers are not running.</div>
|
||||
<div class="pt-2">No containers are running.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@endif
|
||||
|
||||
249
resources/views/livewire/project/shared/metrics.blade.php
Normal file
249
resources/views/livewire/project/shared/metrics.blade.php
Normal file
@@ -0,0 +1,249 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-2 ">
|
||||
<h2>Metrics</h2>
|
||||
</div>
|
||||
<div class="pb-4">Basic metrics for your container.</div>
|
||||
@if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
|
||||
<div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
|
||||
@elseif(!$resource->destination->server->isSentinelEnabled())
|
||||
<div class="alert alert-warning">Metrics are only available for servers with Sentinel enabled!</div>
|
||||
<div> Go to <a class="underline dark:text-white"
|
||||
href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to
|
||||
enable
|
||||
it.</div>
|
||||
@else
|
||||
@if (!str($resource->status)->contains('running'))
|
||||
<div class="alert alert-warning">Metrics are only available when the application is running!</div>
|
||||
@else
|
||||
<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>
|
||||
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()"
|
||||
class="pt-5">
|
||||
<h4>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: false,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
},
|
||||
},
|
||||
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: [{
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: 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>
|
||||
|
||||
<h3>Memory (MB)</h3>
|
||||
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
||||
|
||||
<script>
|
||||
checkTheme();
|
||||
const optionsServerMemory = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
id: '{!! $chartId !!}-memory',
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
},
|
||||
},
|
||||
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: [{
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: 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>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@@ -2,8 +2,15 @@
|
||||
<form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
|
||||
@if ($isReadOnly)
|
||||
@if ($isFirst)
|
||||
<x-forms.input id="storage.name" label="Volume Name" required
|
||||
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
|
||||
@if (
|
||||
$storage->resource_type === 'App\Models\ServiceApplication' ||
|
||||
$storage->resource_type === 'App\Models\ServiceDatabase')
|
||||
<x-forms.input id="storage.name" label="Volume Name" required readonly
|
||||
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
|
||||
@else
|
||||
<x-forms.input id="storage.name" label="Volume Name" required
|
||||
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
|
||||
@endif
|
||||
@if ($isService || $startedAt)
|
||||
<x-forms.input id="storage.host_path" readonly helper="Directory on the host system."
|
||||
label="Source Path"
|
||||
@@ -19,7 +26,7 @@
|
||||
</x-forms.button>
|
||||
@else
|
||||
<x-forms.input id="storage.name" required readonly />
|
||||
<x-forms.input id="storage.host_path" readonly />
|
||||
<x-forms.input id="storage.host_path" readonly />
|
||||
<x-forms.input id="storage.mount_path" required readonly />
|
||||
@endif
|
||||
@else
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
|
||||
<div class="grid gap-2 lg:grid-cols-2">
|
||||
@forelse ($project->environments as $environment)
|
||||
@forelse ($environments as $environment)
|
||||
<div class="gap-2 border border-transparent cursor-pointer box group" x-data
|
||||
x-on:click="goto('{{ $project->uuid }}','{{ $environment->name }}')">
|
||||
<div class="flex flex-1 mx-6">
|
||||
|
||||
232
resources/views/livewire/server/charts.blade.php
Normal file
232
resources/views/livewire/server/charts.blade.php
Normal file
@@ -0,0 +1,232 @@
|
||||
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
|
||||
<h3>CPU (%)</h3>
|
||||
<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>
|
||||
<div wire:ignore id="{!! $chartId !!}-cpu"></div>
|
||||
|
||||
<script>
|
||||
checkTheme();
|
||||
const optionsServerCpu = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
id: '{!! $chartId !!}-cpu',
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
},
|
||||
},
|
||||
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: [{
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: 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>
|
||||
<h3>Memory (MB)</h3>
|
||||
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
||||
|
||||
<script>
|
||||
checkTheme();
|
||||
const optionsServerMemory = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
id: '{!! $chartId !!}-memory',
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
},
|
||||
},
|
||||
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: [{
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: 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>
|
||||
@@ -144,6 +144,29 @@
|
||||
<x-forms.input id="server.settings.dynamic_timeout" label="Deployment timeout (seconds)" required
|
||||
helper="You can define the maximum duration for a deployment to run before timing it out." />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="py-4">Sentinel</h3>
|
||||
@if ($server->isSentinelEnabled())
|
||||
<x-forms.button wire:click='restartSentinel'>Restart</x-forms.button>
|
||||
@endif
|
||||
</div>
|
||||
<div class="w-64">
|
||||
<x-forms.checkbox instantSave id="server.settings.is_metrics_enabled" label="Enable Metrics" />
|
||||
{{-- <x-forms.checkbox instantSave id="server.settings.is_server_api_enabled" label="Enable Server API"
|
||||
helper="You need to open port 12172 on your firewall. This API will be used to gather data from your server, which makes Coolify a lot faster than relying on SSH connections." />
|
||||
<x-forms.button wire:click='checkPortForServerApi'>Check Port for Server API</x-forms.button> --}}
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-wrap gap-2 sm:flex-nowrap">
|
||||
<x-forms.input type="password" id="server.settings.metrics_token" label="Metrics token" required
|
||||
helper="Token for collector (Sentinel)." />
|
||||
<x-forms.input id="server.settings.metrics_refresh_rate_seconds" label="Metrics rate (seconds)"
|
||||
required
|
||||
helper="The interval for gathering metrics. Lower means more disk space will be used." />
|
||||
<x-forms.input id="server.settings.metrics_history_days" label="Metrics history (days)" required
|
||||
helper="How many days should the metrics data should be reserved." />
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -5,4 +5,9 @@
|
||||
<x-server.navbar :server="$server" :parameters="$parameters" />
|
||||
<livewire:server.form :server="$server" />
|
||||
<livewire:server.delete :server="$server" />
|
||||
@if ($server->isFunctional() && $server->isMetricsEnabled())
|
||||
<div class="pt-10">
|
||||
<livewire:server.charts :server="$server" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user