ui: redesign
This commit is contained in:
Andras Bacsai
@@ -8,13 +8,13 @@
|
||||
</div>
|
||||
@if ($server->definedResources()->count() > 0)
|
||||
<div class="pb-2 text-red-500">You need to delete all resources before deleting this server.</div>
|
||||
<x-new-modal disabled isErrorButton buttonTitle="Delete">
|
||||
<x-modal-confirmation disabled isErrorButton buttonTitle="Delete">
|
||||
This server will be deleted. It is not reversible. <br>Please think again.
|
||||
</x-new-modal>
|
||||
</x-modal-confirmation>
|
||||
@else
|
||||
<x-new-modal isErrorButton buttonTitle="Delete">
|
||||
<x-modal-confirmation isErrorButton buttonTitle="Delete">
|
||||
This server will be deleted. It is not reversible. <br>Please think again.
|
||||
</x-new-modal>
|
||||
</x-modal-confirmation>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<div class="flex gap-2">
|
||||
<h2>General</h2>
|
||||
@if ($server->id === 0)
|
||||
<x-new-modal buttonTitle="Save" title="Change Localhost" action="submit">
|
||||
<x-modal-confirmation buttonTitle="Save" title="Change Localhost" action="submit">
|
||||
You could lose a lot of functionalities if you change the server details of the server where Coolify
|
||||
is
|
||||
running on.<br>Please think again.
|
||||
</x-new-modal>
|
||||
</x-modal-confirmation>
|
||||
@else
|
||||
<x-forms.button type="submit">Save</x-forms.button>
|
||||
@if ($server->isFunctional())
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
<div class="flex items-start gap-2">
|
||||
<h1>Servers</h1>
|
||||
<a class="text-white hover:no-underline" href="{{ route('server.create') }}">
|
||||
<x-forms.button class="btn">+ Add</x-forms.button>
|
||||
<x-forms.button >+ Add</x-forms.button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="subtitle">All your projects.</div>
|
||||
|
||||
<div class="grid gap-2 lg:grid-cols-2">
|
||||
@forelse ($servers as $server)
|
||||
<a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
|
||||
|
||||
@@ -1,69 +1,70 @@
|
||||
<div>
|
||||
<x-server.navbar :server="$server" :parameters="$parameters" />
|
||||
<h2>Log Drains</h2>
|
||||
<div class="pb-4">Sends service logs to 3rd party tools.</div>
|
||||
<div class="flex flex-col gap-4 pt-4">
|
||||
<div class="p-4 border border-coolgray-500">
|
||||
<form wire:submit='submit("newrelic")' class="flex flex-col">
|
||||
<h3>New Relic</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("newrelic")'
|
||||
id="server.settings.is_logdrain_newrelic_enabled" label="Enabled" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col w-full gap-2 xl:flex-row">
|
||||
@if ($server->isLogDrainEnabled())
|
||||
<x-forms.input disabled type="password" required
|
||||
id="server.settings.logdrain_newrelic_license_key" label="License Key" />
|
||||
<x-forms.input disabled required id="server.settings.logdrain_newrelic_base_uri"
|
||||
placeholder="https://log-api.eu.newrelic.com/log/v1"
|
||||
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
|
||||
label="Endpoint" />
|
||||
@else
|
||||
<x-forms.input type="password" required id="server.settings.logdrain_newrelic_license_key"
|
||||
label="License Key" />
|
||||
<x-forms.input required id="server.settings.logdrain_newrelic_base_uri"
|
||||
placeholder="https://log-api.eu.newrelic.com/log/v1"
|
||||
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
|
||||
label="Endpoint" />
|
||||
@endif
|
||||
@if ($server->isFunctional())
|
||||
<h2>Log Drains</h2>
|
||||
<div class="pb-4">Sends service logs to 3rd party tools.</div>
|
||||
<div class="flex flex-col gap-4 pt-4">
|
||||
<div class="p-4 border border-coolgray-500">
|
||||
<form wire:submit='submit("newrelic")' class="flex flex-col">
|
||||
<h3>New Relic</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("newrelic")'
|
||||
id="server.settings.is_logdrain_newrelic_enabled" label="Enabled" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-4 pt-6">
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col w-full gap-2 xl:flex-row">
|
||||
@if ($server->isLogDrainEnabled())
|
||||
<x-forms.input disabled type="password" required
|
||||
id="server.settings.logdrain_newrelic_license_key" label="License Key" />
|
||||
<x-forms.input disabled required id="server.settings.logdrain_newrelic_base_uri"
|
||||
placeholder="https://log-api.eu.newrelic.com/log/v1"
|
||||
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
|
||||
label="Endpoint" />
|
||||
@else
|
||||
<x-forms.input type="password" required
|
||||
id="server.settings.logdrain_newrelic_license_key" label="License Key" />
|
||||
<x-forms.input required id="server.settings.logdrain_newrelic_base_uri"
|
||||
placeholder="https://log-api.eu.newrelic.com/log/v1"
|
||||
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
|
||||
label="Endpoint" />
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-4 pt-6">
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Axiom</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("axiom")' id="server.settings.is_logdrain_axiom_enabled"
|
||||
label="Enabled" />
|
||||
</div>
|
||||
<form wire:submit='submit("axiom")' class="flex flex-col">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col w-full gap-2 xl:flex-row">
|
||||
@if ($server->isLogDrainEnabled())
|
||||
<x-forms.input disabled type="password" required id="server.settings.logdrain_axiom_api_key"
|
||||
label="API Key" />
|
||||
<x-forms.input disabled required id="server.settings.logdrain_axiom_dataset_name"
|
||||
label="Dataset Name" />
|
||||
@else
|
||||
<x-forms.input type="password" required id="server.settings.logdrain_axiom_api_key"
|
||||
label="API Key" />
|
||||
<x-forms.input required id="server.settings.logdrain_axiom_dataset_name"
|
||||
label="Dataset Name" />
|
||||
@endif
|
||||
<h3>Axiom</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("axiom")' id="server.settings.is_logdrain_axiom_enabled"
|
||||
label="Enabled" />
|
||||
</div>
|
||||
<form wire:submit='submit("axiom")' class="flex flex-col">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col w-full gap-2 xl:flex-row">
|
||||
@if ($server->isLogDrainEnabled())
|
||||
<x-forms.input disabled type="password" required
|
||||
id="server.settings.logdrain_axiom_api_key" label="API Key" />
|
||||
<x-forms.input disabled required id="server.settings.logdrain_axiom_dataset_name"
|
||||
label="Dataset Name" />
|
||||
@else
|
||||
<x-forms.input type="password" required id="server.settings.logdrain_axiom_api_key"
|
||||
label="API Key" />
|
||||
<x-forms.input required id="server.settings.logdrain_axiom_dataset_name"
|
||||
label="Dataset Name" />
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-4 pt-6">
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
{{-- <h3>Highlight.io</h3>
|
||||
<div class="flex justify-end gap-4 pt-6">
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
{{-- <h3>Highlight.io</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("highlight")'
|
||||
id="server.settings.is_logdrain_highlight_enabled" label="Enabled" />
|
||||
@@ -81,33 +82,36 @@
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form> --}}
|
||||
<h3>Custom FluentBit configuration</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("custom")' id="server.settings.is_logdrain_custom_enabled"
|
||||
label="Enabled" />
|
||||
<h3>Custom FluentBit configuration</h3>
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox instantSave='instantSave("custom")'
|
||||
id="server.settings.is_logdrain_custom_enabled" label="Enabled" />
|
||||
</div>
|
||||
<form wire:submit='submit("custom")' class="flex flex-col">
|
||||
<div class="flex flex-col gap-4">
|
||||
@if ($server->isLogDrainEnabled())
|
||||
<x-forms.textarea disabled rows="6" required
|
||||
id="server.settings.logdrain_custom_config" label="Custom FluentBit Configuration" />
|
||||
<x-forms.textarea disabled id="server.settings.logdrain_custom_config_parser"
|
||||
label="Custom Parser Configuration" />
|
||||
@else
|
||||
<x-forms.textarea rows="6" required id="server.settings.logdrain_custom_config"
|
||||
label="Custom FluentBit Configuration" />
|
||||
<x-forms.textarea id="server.settings.logdrain_custom_config_parser"
|
||||
label="Custom Parser Configuration" />
|
||||
@endif
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end gap-4 pt-6">
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<form wire:submit='submit("custom")' class="flex flex-col">
|
||||
<div class="flex flex-col gap-4">
|
||||
@if ($server->isLogDrainEnabled())
|
||||
<x-forms.textarea disabled rows="6" required id="server.settings.logdrain_custom_config"
|
||||
label="Custom FluentBit Configuration" />
|
||||
<x-forms.textarea disabled id="server.settings.logdrain_custom_config_parser"
|
||||
label="Custom Parser Configuration" />
|
||||
@else
|
||||
<x-forms.textarea rows="6" required id="server.settings.logdrain_custom_config"
|
||||
label="Custom FluentBit Configuration" />
|
||||
<x-forms.textarea id="server.settings.logdrain_custom_config_parser"
|
||||
label="Custom Parser Configuration" />
|
||||
@endif
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end gap-4 pt-6">
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div>Server is not validated. Validate first.</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
@if ($limit_reached)
|
||||
<x-limit-reached name="servers" />
|
||||
@else
|
||||
<h1>Create a new Server</h1>
|
||||
<div class="subtitle">Servers are the main blocks of your infrastructure.</div>
|
||||
<h1 class="title">New Server</h1>
|
||||
<form class="flex flex-col gap-2" wire:submit='submit'>
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input id="name" label="Name" required />
|
||||
@@ -29,8 +28,8 @@
|
||||
<x-forms.checkbox instantSave type="checkbox" id="is_build_server" label="Use it as a build server?" />
|
||||
</div>
|
||||
<div class="w-96">
|
||||
<h3 class="pt-6">Swarm Support</h3>
|
||||
<div> Swarm support is experimental. Read the docs <a class='text-white'
|
||||
<h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
|
||||
<div class="pb-4">Read the docs <a class='text-white'
|
||||
href='https://coolify.io/docs/docker/swarm#deploy-with-persistent-storage'
|
||||
target='_blank'>here</a>.</div>
|
||||
@if ($is_swarm_worker || $is_build_server)
|
||||
|
||||
@@ -1,142 +1,165 @@
|
||||
<div>
|
||||
<x-server.navbar :server="$server" :parameters="$parameters" />
|
||||
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
|
||||
<div class="flex flex-col gap-4 xl:w-32">
|
||||
<a :class="activeTab === 'managed' && 'text-white'"
|
||||
@click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
|
||||
<a :class="activeTab === 'unmanaged' && 'text-white'"
|
||||
@click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'" href="#">Unmanaged</a>
|
||||
</div>
|
||||
<div class="w-full pl-8">
|
||||
<div x-cloak x-show="activeTab === 'managed'" class="h-full">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2">
|
||||
<h2>Resources</h2>
|
||||
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
|
||||
</div>
|
||||
<div class="pb-4 title">Here you can find all resources that are managed by Coolify.</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-coolgray-400">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Project
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Environment</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Type</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-coolgray-400">
|
||||
@forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
|
||||
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource->project(), 'name') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'environment.name') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap"><a class=""
|
||||
href="{{ $resource->link() }}">{{ $resource->name }}
|
||||
<x-internal-link /></a>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ str($resource->type())->headline() }}</td>
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
|
||||
@if ($resource->type() === 'service')
|
||||
<x-status.services :service="$resource" :showRefreshButton="false" />
|
||||
@else
|
||||
<x-status.index :resource="$resource" :showRefreshButton="false" />
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if ($server->isFunctional())
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
|
||||
<div class="flex flex-col gap-4 xl:w-32">
|
||||
<a :class="activeTab === 'managed' && 'text-white'"
|
||||
@click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
|
||||
<a :class="activeTab === 'unmanaged' && 'text-white'"
|
||||
@click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'"
|
||||
href="#">Unmanaged</a>
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'unmanaged'" class="h-full">
|
||||
<div class="flex flex-col" x-init="$wire.loadUnmanagedContainers()">
|
||||
<div class="flex gap-2">
|
||||
<h2>Resources</h2>
|
||||
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
|
||||
</div>
|
||||
<div class="pb-4 title">Here you can find all other containers running on the server.</div>
|
||||
</div>
|
||||
@if ($unmanagedContainers->count() > 0)
|
||||
<div class="w-full pl-8">
|
||||
<div x-cloak x-show="activeTab === 'managed'" class="h-full">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2">
|
||||
<h2>Resources</h2>
|
||||
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
|
||||
</div>
|
||||
<div class="subtitle">Here you can find all resources that are managed by Coolify.</div>
|
||||
</div>
|
||||
@if ($server->definedResources()->count() > 0)
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-coolgray-400">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Image
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Status
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-coolgray-400">
|
||||
@forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
|
||||
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'Names') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'Image') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'State') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
@if (data_get($resource, 'State') === 'running')
|
||||
<x-forms.button
|
||||
wire:click="restartUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Restart</x-forms.button>
|
||||
<x-forms.button isError
|
||||
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
|
||||
@elseif (data_get($resource, 'State') === 'exited')
|
||||
<x-forms.button
|
||||
wire:click="startUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Start</x-forms.button>
|
||||
@elseif (data_get($resource, 'State') === 'restarting')
|
||||
<x-forms.button
|
||||
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
|
||||
@endif
|
||||
</td>
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-coolgray-400">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Project
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Environment</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Name
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Type
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
@empty
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-coolgray-400">
|
||||
@forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
|
||||
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource->project(), 'name') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'environment.name') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap"><a
|
||||
class=""
|
||||
href="{{ $resource->link() }}">{{ $resource->name }}
|
||||
<x-internal-link /></a>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ str($resource->type())->headline() }}</td>
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
|
||||
@if ($resource->type() === 'service')
|
||||
<x-status.services :service="$resource"
|
||||
:showRefreshButton="false" />
|
||||
@else
|
||||
<x-status.index :resource="$resource"
|
||||
:showRefreshButton="false" />
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div>No resources found.</div>
|
||||
@endif
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'unmanaged'" class="h-full">
|
||||
<div class="flex flex-col" x-init="$wire.loadUnmanagedContainers()">
|
||||
<div class="flex gap-2">
|
||||
<h2>Resources</h2>
|
||||
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
|
||||
</div>
|
||||
<div class="subtitle">Here you can find all other containers running on the server.</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($unmanagedContainers->count() > 0)
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-coolgray-400">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Name
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Image
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Status
|
||||
</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-coolgray-400">
|
||||
@forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
|
||||
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'Names') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'Image') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
{{ data_get($resource, 'State') }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">
|
||||
@if (data_get($resource, 'State') === 'running')
|
||||
<x-forms.button
|
||||
wire:click="restartUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Restart</x-forms.button>
|
||||
<x-forms.button isError
|
||||
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
|
||||
@elseif (data_get($resource, 'State') === 'exited')
|
||||
<x-forms.button
|
||||
wire:click="startUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Start</x-forms.button>
|
||||
@elseif (data_get($resource, 'State') === 'restarting')
|
||||
<x-forms.button
|
||||
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
|
||||
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div>No resources found.</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div>Server is not validated. Validate first.</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user