dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
Andras Bacsai
2023-05-14 14:43:49 +02:00
parent 35f8911b1b
commit 86afa200cd
10 changed files with 97 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Livewire/Server/Form.php
View File

@@ -32,7 +32,7 @@ class Form extends Component
$this->emit('newMonitorActivity', $activity->id); $this->emit('newMonitorActivity', $activity->id);
} }
public function checkServer() public function validateServer()
{ {
try { try {
$this->uptime = instantRemoteProcess(['uptime'], $this->server, false); $this->uptime = instantRemoteProcess(['uptime'], $this->server, false);

9
resources/css/app.css
View File

@@ -6,8 +6,9 @@ body {
@apply bg-coolgray-100 text-white font-sans; @apply bg-coolgray-100 text-white font-sans;
} }
input, textarea { input,
@apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none ; textarea {
@apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none;
} }
select { select {
@apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none; @apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none;
@@ -20,11 +21,11 @@ button {
@apply relative float-left; @apply relative float-left;
} }
.main-menu:after { .main-menu:after {
content: '/'; content: "/";
@apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.3rem]; @apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.3rem];
} }
.magic-input { .magic-input {
@apply w-[25rem] rounded shadow outline-none focus:bg-neutral-700 text-white; @apply w-[25rem] rounded outline-none bg-coolgray-400 focus:bg-neutral-700 text-white;
} }
.magic-items { .magic-items {
@apply absolute top-14 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b; @apply absolute top-14 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;

14
resources/views/components/inputs/button.blade.php
View File

@@ -1,17 +1,21 @@
@props([ @props([
'isWarning' => null, 'isWarning' => null,
'isBold' => false,
'disabled' => null, 'disabled' => null,
'defaultClass' => 'text-white hover:bg-coollabs h-8 rounded transition-colors', 'defaultClass' => 'text-white hover:bg-coollabs h-10 rounded transition-colors',
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8 rounded', 'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-10 rounded',
'disabledClass' => 'text-coolgray-200 h-8 rounded', 'disabledClass' => 'text-neutral-400 h-10 rounded',
'loadingClass' => 'text-black bg-green-500 h-8 rounded', 'loadingClass' => 'text-black bg-green-500 h-10 rounded',
'confirm' => null, 'confirm' => null,
'confirmAction' => null, 'confirmAction' => null,
]) ])
<button {{ $attributes }} @class([ <button {{ $attributes }} @class([
$defaultClass => !$confirm && !$isWarning && !$disabled, $defaultClass => !$confirm && !$isWarning && !$disabled && !$isBold,
$defaultWarningClass => ($confirm || $isWarning) && !$disabled, $defaultWarningClass => ($confirm || $isWarning) && !$disabled,
$disabledClass => $disabled, $disabledClass => $disabled,
$isBold => $isBold
? 'bg-coollabs text-white hover:bg-coollabs-100 h-10 rounded transition-colors'
: '',
]) @if ($attributes->whereStartsWith('wire:click') && !$disabled) ]) @if ($attributes->whereStartsWith('wire:click') && !$disabled)
wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}" wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
wire:loading.delay.class="{{ $loadingClass }}" wire:loading.delay.attr="disabled" wire:loading.delay.class="{{ $loadingClass }}" wire:loading.delay.attr="disabled"

2
resources/views/components/magic-bar.blade.php
View File

@@ -1,4 +1,4 @@
<div x-data="magicsearchbar" @slash.window="mainMenu = true" class="pt-2"> <div x-data="magicsearchbar" @slash.window="mainMenu = true">
{{-- Main --}} {{-- Main --}}
<template x-cloak x-if="isMainMenu"> <template x-cloak x-if="isMainMenu">
<div> <div>

60
resources/views/components/navbar.blade.php
View File

@@ -1,31 +1,33 @@
<nav class="flex gap-2"> @auth
@auth <nav class="bg-coolgray-200/75">
<div class="fixed flex gap-2 left-2 top-2"> <div class="flex px-2 py-1">
<a href="/"> <div class="flex gap-2">
<x-inputs.button>Home</x-inputs.button> <a href="/">
</a> <x-inputs.button>Home</x-inputs.button>
<a href="/command-center">
<x-inputs.button>Command Center</x-inputs.button>
</a>
<a href="/profile">
<x-inputs.button>Profile</x-inputs.button>
</a>
@if (auth()->user()->isRoot())
<a href="/settings">
<x-inputs.button>Settings</x-inputs.button>
</a> </a>
@endif <a href="/command-center">
<x-inputs.button>Command Center</x-inputs.button>
</a>
<a href="/profile">
<x-inputs.button>Profile</x-inputs.button>
</a>
@if (auth()->user()->isRoot())
<a href="/settings">
<x-inputs.button>Settings</x-inputs.button>
</a>
@endif
</div>
<div class="flex-1"></div>
<x-magic-bar />
<div class="flex-1"></div>
<div class="flex gap-2">
{{-- <livewire:check-update /> --}}
<livewire:force-upgrade />
<form action="/logout" method="POST">
@csrf
<x-inputs.button type="submit">Logout</x-inputs.button>
</form>
</div>
</div> </div>
<div class="flex-1"></div> </nav>
<x-magic-bar /> @endauth
<div class="flex-1"></div>
<div class="fixed flex gap-2 right-2 top-2">
{{-- <livewire:check-update /> --}}
<livewire:force-upgrade />
<form action="/logout" method="POST">
@csrf
<x-inputs.button type="submit">Logout</x-inputs.button>
</form>
</div>
@endauth
</nav>

14
resources/views/livewire/activity-monitor.blade.php
View File

@@ -1,10 +1,10 @@
<div> <div>
<div @if ($this->activity)
class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4"> <div
@if ($this->activity) class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
<pre class="whitespace-pre-wrap" @if ($isPollingActive) wire:poll.750ms="polling" @endif>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($this->activity) }}</pre> <pre class="whitespace-pre-wrap" @if ($isPollingActive) wire:poll.750ms="polling" @endif>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($this->activity) }}</pre>
@else {{-- @else
<pre class="whitespace-pre-wrap">Output will be here...</pre> <pre class="whitespace-pre-wrap">Output will be here...</pre> --}}
@endif </div>
</div> @endif
</div> </div>

2
resources/views/livewire/run-command.blade.php
View File

@@ -10,7 +10,7 @@
@endif @endif
@endforeach @endforeach
</select> </select>
<x-inputs.button type="submit">Run</x-inputs.button> <x-inputs.button isBold type="submit">Run</x-inputs.button>
</form> </form>
<div class="container w-full pt-10 mx-auto"> <div class="container w-full pt-10 mx-auto">
<livewire:activity-monitor /> <livewire:activity-monitor />

29
resources/views/livewire/server/form.blade.php
View File

@@ -1,6 +1,23 @@
<div x-data="{ deleteServer: false }"> <div x-data="{ deleteServer: false }">
<x-naked-modal show="deleteServer" message='Are you sure you would like to delete this server?' /> <x-naked-modal show="deleteServer" message='Are you sure you would like to delete this server?' />
<form wire:submit.prevent='submit' class="flex flex-col"> <form wire:submit.prevent='submit' class="flex flex-col">
<div class="flex flex-col pb-4">
<div class="flex items-center gap-2">
<div class="text-3xl font-bold">Server</div>
<x-inputs.button isBold type="submit">Submit</x-inputs.button>
<x-inputs.button isWarning x-on:click.prevent="deleteServer = true">
Delete
</x-inputs.button>
</div>
<div>
@if ($server->settings->is_validated)
<div class="text-green-400/90">Validated</div>
@else
<div class="text-red-400/90">Not validated</div>
@endif
</div>
</div>
<div class="flex flex-col gap-2 xl:flex-row"> <div class="flex flex-col gap-2 xl:flex-row">
<div class="flex flex-col w-96"> <div class="flex flex-col w-96">
<x-inputs.input id="server.name" label="Name" required /> <x-inputs.input id="server.name" label="Name" required />
@@ -18,15 +35,11 @@
@endif @endif
</div> </div>
</div> </div>
<div class="flex"> <div class="flex gap-2">
<x-inputs.button type="submit">Submit</x-inputs.button> <x-inputs.button isBold wire:click.prevent='validateServer'>Validate Server</x-inputs.button>
<x-inputs.button wire:click.prevent='checkServer'>Check Server</x-inputs.button> <x-inputs.button isBold wire:click.prevent='installDocker'>Install Docker</x-inputs.button>
<x-inputs.button wire:click.prevent='installDocker'>Install Docker</x-inputs.button>
<x-inputs.button isWarning x-on:click.prevent="deleteServer = true">
Delete
</x-inputs.button>
</div> </div>
<x-inputs.input class="" disabled type="checkbox" id="server.settings.is_validated" label="Validated" />
</form> </form>
@isset($uptime) @isset($uptime)

12
resources/views/livewire/server/proxy.blade.php
View File

@@ -1,20 +1,20 @@
<div> <div>
<h2> Proxy </h2> <h2>Proxy</h2>
@if($this->server->extra_attributes->proxy) @if ($this->server->extra_attributes->proxy)
<div class="mt-6"> <div>
<div> <div>
Proxy type: {{ $this->server->extra_attributes->proxy }} Proxy type: {{ $this->server->extra_attributes->proxy }}
</div> </div>
<div id="proxy_options" x-init="$wire.checkProxySettingsInSync()" class="relative w-fit"> <div id="proxy_options" x-init="$wire.checkProxySettingsInSync()" class="relative w-fit">
{{-- Proxy is being checked against DB information --}} {{-- Proxy is being checked against DB information --}}
@if(! $this->is_check_proxy_complete) @if (!$this->is_check_proxy_complete)
@include('livewire.server._proxy.loading') @include('livewire.server._proxy.loading')
@endif @endif
@if($this->is_check_proxy_complete && (! $this->is_proxy_settings_in_sync) ) @if ($this->is_check_proxy_complete && !$this->is_proxy_settings_in_sync)
@include('livewire.server._proxy.problems') @include('livewire.server._proxy.problems')
@endif @endif

24
resources/views/server/show.blade.php
View File

@@ -1,19 +1,25 @@
<x-layout> <x-layout>
<h1>Server</h1>
<livewire:server.form :server_id="$server->id" /> <livewire:server.form :server_id="$server->id" />
<h2>Private Key <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}"> <div class="flex items-center gap-2">
<x-inputs.button>Change</x-inputs.button> <h2>Private Key</h2>
<a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
<x-inputs.button isBold>Change</x-inputs.button>
</a> </a>
</h2> </div>
<p>{{ $server->privateKey->name }}</p> <p>{{ $server->privateKey->name }}</p>
<h2>Destinations <a href="{{ route('destination.new', ['server_id' => $server->id]) }}"> <div class="flex items-center gap-2">
<x-inputs.button>New</x-inputs.button> <h2>Destinations</h2>
</a></h2> <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
@if ($server->standaloneDockers) <x-inputs.button isBold>New</x-inputs.button>
</a>
</div>
@if ($server->standaloneDockers->count() > 0)
@foreach ($server->standaloneDockers as $docker) @foreach ($server->standaloneDockers as $docker)
<p>Network: {{ data_get($docker, 'network') }}</p> <p>Network: {{ data_get($docker, 'network') }}</p>
@endforeach @endforeach
@else
<p>No destinations found</p>
@endif @endif
<livewire:server.proxy :server="$server"/> <livewire:server.proxy :server="$server" />
</x-layout> </x-layout>