ui changes
This commit is contained in:
Andras Bacsai
parent
35f8911b1b
commit
86afa200cd
@ -32,7 +32,7 @@ class Form extends Component
|
||||
|
||||
$this->emit('newMonitorActivity', $activity->id);
|
||||
}
|
||||
public function checkServer()
|
||||
public function validateServer()
|
||||
{
|
||||
try {
|
||||
$this->uptime = instantRemoteProcess(['uptime'], $this->server, false);
|
||||
|
||||
@ -6,8 +6,9 @@ body {
|
||||
@apply bg-coolgray-100 text-white font-sans;
|
||||
}
|
||||
|
||||
input, 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 ;
|
||||
input,
|
||||
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 {
|
||||
@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;
|
||||
}
|
||||
.main-menu:after {
|
||||
content: '/';
|
||||
content: "/";
|
||||
@apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.3rem];
|
||||
}
|
||||
.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 {
|
||||
@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;
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
@props([
|
||||
'isWarning' => null,
|
||||
'isBold' => false,
|
||||
'disabled' => null,
|
||||
'defaultClass' => 'text-white hover:bg-coollabs h-8 rounded transition-colors',
|
||||
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8 rounded',
|
||||
'disabledClass' => 'text-coolgray-200 h-8 rounded',
|
||||
'loadingClass' => 'text-black bg-green-500 h-8 rounded',
|
||||
'defaultClass' => 'text-white hover:bg-coollabs h-10 rounded transition-colors',
|
||||
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-10 rounded',
|
||||
'disabledClass' => 'text-neutral-400 h-10 rounded',
|
||||
'loadingClass' => 'text-black bg-green-500 h-10 rounded',
|
||||
'confirm' => null,
|
||||
'confirmAction' => null,
|
||||
])
|
||||
<button {{ $attributes }} @class([
|
||||
$defaultClass => !$confirm && !$isWarning && !$disabled,
|
||||
$defaultClass => !$confirm && !$isWarning && !$disabled && !$isBold,
|
||||
$defaultWarningClass => ($confirm || $isWarning) && !$disabled,
|
||||
$disabledClass => $disabled,
|
||||
$isBold => $isBold
|
||||
? 'bg-coollabs text-white hover:bg-coollabs-100 h-10 rounded transition-colors'
|
||||
: '',
|
||||
]) @if ($attributes->whereStartsWith('wire:click') && !$disabled)
|
||||
wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
|
||||
wire:loading.delay.class="{{ $loadingClass }}" wire:loading.delay.attr="disabled"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div x-data="magicsearchbar" @slash.window="mainMenu = true" class="pt-2">
|
||||
<div x-data="magicsearchbar" @slash.window="mainMenu = true">
|
||||
{{-- Main --}}
|
||||
<template x-cloak x-if="isMainMenu">
|
||||
<div>
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
<nav class="flex gap-2">
|
||||
@auth
|
||||
<div class="fixed flex gap-2 left-2 top-2">
|
||||
<a href="/">
|
||||
<x-inputs.button>Home</x-inputs.button>
|
||||
</a>
|
||||
<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>
|
||||
@auth
|
||||
<nav class="bg-coolgray-200/75">
|
||||
<div class="flex px-2 py-1">
|
||||
<div class="flex gap-2">
|
||||
<a href="/">
|
||||
<x-inputs.button>Home</x-inputs.button>
|
||||
</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 class="flex-1"></div>
|
||||
<x-magic-bar />
|
||||
<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>
|
||||
</nav>
|
||||
@endauth
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div>
|
||||
<div
|
||||
class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
|
||||
@if ($this->activity)
|
||||
@if ($this->activity)
|
||||
<div
|
||||
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>
|
||||
@else
|
||||
<pre class="whitespace-pre-wrap">Output will be here...</pre>
|
||||
@endif
|
||||
</div>
|
||||
{{-- @else
|
||||
<pre class="whitespace-pre-wrap">Output will be here...</pre> --}}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@endif
|
||||
@endforeach
|
||||
</select>
|
||||
<x-inputs.button type="submit">Run</x-inputs.button>
|
||||
<x-inputs.button isBold type="submit">Run</x-inputs.button>
|
||||
</form>
|
||||
<div class="container w-full pt-10 mx-auto">
|
||||
<livewire:activity-monitor />
|
||||
|
||||
@ -1,6 +1,23 @@
|
||||
<div x-data="{ deleteServer: false }">
|
||||
<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">
|
||||
<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 w-96">
|
||||
<x-inputs.input id="server.name" label="Name" required />
|
||||
@ -18,15 +35,11 @@
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<x-inputs.button type="submit">Submit</x-inputs.button>
|
||||
<x-inputs.button wire:click.prevent='checkServer'>Check Server</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 class="flex gap-2">
|
||||
<x-inputs.button isBold wire:click.prevent='validateServer'>Validate Server</x-inputs.button>
|
||||
<x-inputs.button isBold wire:click.prevent='installDocker'>Install Docker</x-inputs.button>
|
||||
|
||||
</div>
|
||||
<x-inputs.input class="" disabled type="checkbox" id="server.settings.is_validated" label="Validated" />
|
||||
</form>
|
||||
|
||||
@isset($uptime)
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<div>
|
||||
<h2> Proxy </h2>
|
||||
<h2>Proxy</h2>
|
||||
|
||||
@if($this->server->extra_attributes->proxy)
|
||||
<div class="mt-6">
|
||||
@if ($this->server->extra_attributes->proxy)
|
||||
<div>
|
||||
<div>
|
||||
Proxy type: {{ $this->server->extra_attributes->proxy }}
|
||||
Proxy type: {{ $this->server->extra_attributes->proxy }}
|
||||
</div>
|
||||
|
||||
<div id="proxy_options" x-init="$wire.checkProxySettingsInSync()" class="relative w-fit">
|
||||
|
||||
{{-- Proxy is being checked against DB information --}}
|
||||
@if(! $this->is_check_proxy_complete)
|
||||
@if (!$this->is_check_proxy_complete)
|
||||
@include('livewire.server._proxy.loading')
|
||||
@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')
|
||||
@endif
|
||||
|
||||
|
||||
@ -1,19 +1,25 @@
|
||||
<x-layout>
|
||||
<h1>Server</h1>
|
||||
<livewire:server.form :server_id="$server->id" />
|
||||
<h2>Private Key <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
|
||||
<x-inputs.button>Change</x-inputs.button>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Private Key</h2>
|
||||
<a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
|
||||
<x-inputs.button isBold>Change</x-inputs.button>
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<p>{{ $server->privateKey->name }}</p>
|
||||
<h2>Destinations <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
|
||||
<x-inputs.button>New</x-inputs.button>
|
||||
</a></h2>
|
||||
@if ($server->standaloneDockers)
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Destinations</h2>
|
||||
<a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
|
||||
<x-inputs.button isBold>New</x-inputs.button>
|
||||
</a>
|
||||
</div>
|
||||
@if ($server->standaloneDockers->count() > 0)
|
||||
@foreach ($server->standaloneDockers as $docker)
|
||||
<p>Network: {{ data_get($docker, 'network') }}</p>
|
||||
@endforeach
|
||||
@else
|
||||
<p>No destinations found</p>
|
||||
@endif
|
||||
|
||||
<livewire:server.proxy :server="$server"/>
|
||||
<livewire:server.proxy :server="$server" />
|
||||
</x-layout>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user