Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

sprinkle some css

Browse Source
This commit is contained in:
Andras Bacsai 2023-05-12 15:39:07 +02:00
parent 0731b1fe6e
commit d6dc540236
21 changed files with 285 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Livewire/CheckUpdate.php
View File

@ -2,8 +2,6 @@
namespace App\Http\Livewire; namespace App\Http\Livewire;
use App\Models\Server;
use Illuminate\Support\Facades\Http;
use Livewire\Component; use Livewire\Component;
class CheckUpdate extends Component class CheckUpdate extends Component

4
app/Http/Livewire/Destination/New/StandaloneDocker.php
View File

@ -27,7 +27,9 @@ public function mount()
if (request()->query('server_id')) { if (request()->query('server_id')) {
$this->server_id = request()->query('server_id'); $this->server_id = request()->query('server_id');
} else { } else {
$this->server_id = Server::validated()->first()->id; if ($this->servers->count() > 0) {
$this->server_id = $this->servers->first()->id;
}
} }
} }
$this->network = new Cuid2(7); $this->network = new Cuid2(7);

19
app/Http/Livewire/PrivateKey/Create.php
View File

@ -3,15 +3,14 @@
namespace App\Http\Livewire\PrivateKey; namespace App\Http\Livewire\PrivateKey;
use App\Models\PrivateKey; use App\Models\PrivateKey;
use Illuminate\Routing\Route as RoutingRoute;
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
use Livewire\Component; use Livewire\Component;
class Create extends Component class Create extends Component
{ {
public $private_key_value; public string $name;
public $private_key_name; public string|null $description;
public $private_key_description; public string $value;
public string $currentRoute; public string $currentRoute;
public function mount() public function mount()
@ -20,14 +19,14 @@ public function mount()
} }
public function createPrivateKey() public function createPrivateKey()
{ {
$this->private_key_value = trim($this->private_key_value); $this->value = trim($this->value);
if (!str_ends_with($this->private_key_value, "\n")) { if (!str_ends_with($this->value, "\n")) {
$this->private_key_value .= "\n"; $this->value .= "\n";
} }
$new_private_key = PrivateKey::create([ $new_private_key = PrivateKey::create([
'name' => $this->private_key_name, 'name' => $this->name,
'description' => $this->private_key_description, 'description' => $this->description,
'private_key' => $this->private_key_value, 'private_key' => $this->value,
'team_id' => session('currentTeam')->id 'team_id' => session('currentTeam')->id
]); ]);
session('currentTeam')->privateKeys = PrivateKey::where('team_id', session('currentTeam')->id)->get(); session('currentTeam')->privateKeys = PrivateKey::where('team_id', session('currentTeam')->id)->get();

18
app/Http/Livewire/RunCommand.php
View File

@ -8,7 +8,7 @@
class RunCommand extends Component class RunCommand extends Component
{ {
public $command; public string $command;
public $server; public $server;
public $servers = []; public $servers = [];
@ -16,16 +16,20 @@ class RunCommand extends Component
'server' => 'required', 'server' => 'required',
'command' => 'required', 'command' => 'required',
]; ];
public function mount() public function mount($servers)
{ {
$this->servers = Server::where('team_id', session('currentTeam')->id)->get(); $this->servers = $servers;
$this->server = $this->servers[0]->uuid; $this->server = $servers[0]->uuid;
} }
public function runCommand() public function runCommand()
{ {
$this->validate(); try {
$activity = remoteProcess([$this->command], Server::where('uuid', $this->server)->first(), ActivityTypes::INLINE->value); $this->validate();
$this->emit('newMonitorActivity', $activity->id); $activity = remoteProcess([$this->command], Server::where('uuid', $this->server)->first(), ActivityTypes::INLINE->value);
$this->emit('newMonitorActivity', $activity->id);
} catch (\Exception $e) {
return generalErrorHandler($e);
}
} }
} }

40
app/Http/Livewire/Server/New/ByIp.php
View File

@ -9,7 +9,7 @@
class ByIp extends Component class ByIp extends Component
{ {
public $private_keys; public $private_keys;
public int $private_key_id; public int|null $private_key_id = null;
public $new_private_key_name; public $new_private_key_name;
public $new_private_key_description; public $new_private_key_description;
public $new_private_key_value; public $new_private_key_value;
@ -20,30 +20,40 @@ class ByIp extends Component
public string $user = 'root'; public string $user = 'root';
public int $port = 22; public int $port = 22;
protected $rules = [
'name' => 'required',
'ip' => 'required',
'user' => 'required',
'port' => 'required|integer',
];
public function mount() public function mount()
{ {
$this->name = generateRandomName(); $this->name = generateRandomName();
$this->private_keys = PrivateKey::where('team_id', session('currentTeam')->id)->get(); $this->private_keys = PrivateKey::where('team_id', session('currentTeam')->id)->get();
} }
public function setPrivateKey($private_key_id) public function setPrivateKey(string $private_key_id)
{ {
$this->private_key_id = $private_key_id; $this->private_key_id = $private_key_id;
} }
public function submit() public function submit()
{ {
if (!$this->private_key_id) { try {
$this->addError('private_key_id', 'The private key field is required.'); if (!$this->private_key_id) {
return; return $this->emit('error', 'You must select a private key');
}
$this->validate();
$server = Server::create([
'name' => $this->name,
'description' => $this->description,
'ip' => $this->ip,
'user' => $this->user,
'port' => $this->port,
'team_id' => session('currentTeam')->id,
'private_key_id' => $this->private_key_id
]);
return redirect()->route('server.show', $server->uuid);
} catch (\Exception $e) {
return generalErrorHandler($e);
} }
$server = Server::create([
'name' => $this->name,
'description' => $this->description,
'ip' => $this->ip,
'user' => $this->user,
'port' => $this->port,
'team_id' => session('currentTeam')->id,
'private_key_id' => $this->private_key_id
]);
return redirect()->route('server.show', $server->uuid);
} }
} }

2
bootstrap/helpers.php
View File

@ -40,7 +40,7 @@ function generalErrorHandler(\Throwable $e, $that = null, $isJson = false)
'error' => $error->getMessage(), 'error' => $error->getMessage(),
]); ]);
} else { } else {
dump('Duplicate entry found.'); dump($error);
} }
} }
} }

29
resources/css/app.css
View File

@ -1,35 +1,33 @@
/* @tailwind base; */ @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { body {
@apply bg-neutral-900 text-white font-sans; @apply bg-coolgray-100 text-white font-sans;
}
a, a:visited {
@apply text-neutral-300 hover:text-purple-500;
} }
input, textarea { input, textarea {
@apply border-none p-2 bg-neutral-800 text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none @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-neutral-800 text-white disabled:text-neutral-600 read-only:select-none @apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none;
} }
button { button {
@apply border-none px-2 p-1 cursor-pointer; @apply border-none px-2 p-1 cursor-pointer;
} }
.main-menu { .main-menu {
@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-1; @apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.3rem];
} }
.magic-input { .magic-input {
@apply w-96 rounded shadow outline-none focus:bg-neutral-700; @apply w-[25rem] rounded shadow outline-none focus:bg-neutral-700 text-white;
} }
.magic-items { .magic-items {
@apply text-xs absolute top-11 w-[25rem] bg-neutral-800; @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;
} }
.magic-item { .magic-item {
@apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white; @apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white;
@ -37,3 +35,12 @@ .magic-item {
.magic-item-focused { .magic-item-focused {
@apply bg-neutral-700 text-white; @apply bg-neutral-700 text-white;
} }
h1 {
@apply text-3xl font-bold py-4;
}
h2 {
@apply text-xl font-bold py-4;
}
.box {
@apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs p-2;
}

2
resources/views/command-center.blade.php
View File

@ -1,3 +1,3 @@
<x-layout> <x-layout>
<livewire:run-command /> <livewire:run-command :servers="$servers" />
</x-layout> </x-layout>

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

@ -1,10 +1,10 @@
@props([ @props([
'isWarning' => null, 'isWarning' => null,
'disabled' => null, 'disabled' => null,
'defaultClass' => 'text-white bg-neutral-800 hover:bg-violet-600 h-8', 'defaultClass' => 'text-white hover:bg-coollabs h-8 rounded transition-colors',
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8', 'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8 rounded',
'disabledClass' => 'text-neutral-400 bg-neutral-900 h-8', 'disabledClass' => 'text-coolgray-200 h-8 rounded',
'loadingClass' => 'text-black bg-green-500 h-8', 'loadingClass' => 'text-black bg-green-500 h-8 rounded',
'confirm' => null, 'confirm' => null,
'confirmAction' => null, 'confirmAction' => null,
]) ])

7
resources/views/components/inputs/input.blade.php
View File

@ -6,6 +6,7 @@
'instantSave' => $attributes->has('instantSave'), 'instantSave' => $attributes->has('instantSave'),
'noLabel' => $attributes->has('noLabel'), 'noLabel' => $attributes->has('noLabel'),
'noDirty' => $attributes->has('noDirty'), 'noDirty' => $attributes->has('noDirty'),
'hidden' => $attributes->has('hidden'),
]) ])
<span @class([ <span @class([
@ -14,7 +15,7 @@
])> ])>
@if (!$noLabel) @if (!$noLabel)
<label for={{ $id }} @if (!$noDirty) wire:dirty.class="text-amber-300" @endif <label for={{ $id }} @if (!$noDirty) wire:dirty.class="text-amber-300" @endif
wire:target={{ $id }}> @if ($hidden) class="hidden" @endif wire:target={{ $id }}>
@if ($label) @if ($label)
{{ $label }} {{ $label }}
@else @else
@ -23,6 +24,7 @@
@if ($required) @if ($required)
* *
@endif @endif
</label> </label>
@endif @endif
@if ($type === 'textarea') @if ($type === 'textarea')
@ -32,7 +34,8 @@
<input {{ $attributes }} @if ($required) required @endif <input {{ $attributes }} @if ($required) required @endif
@if (!$noDirty) wire:dirty.class="text-black bg-amber-300" @endif @if (!$noDirty) wire:dirty.class="text-black bg-amber-300" @endif
type={{ $type }} id={{ $id }} name={{ $id }} type={{ $type }} id={{ $id }} name={{ $id }}
@if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif /> @if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif
@if ($hidden) class="hidden" @endif />
@endif @endif
@error($id) @error($id)
<div class="text-red-500">{{ $message }}</div> <div class="text-red-500">{{ $message }}</div>

4
resources/views/components/layout.blade.php
View File

@ -4,6 +4,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
<link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
@env('local') @env('local')
<title>Coolify - localhost</title> <title>Coolify - localhost</title>
@endenv @endenv
@ -28,7 +30,7 @@ class="fixed text-xs cursor-pointer left-2 bottom-1 opacity-20 hover:opacity-100
@auth @auth
<x-navbar /> <x-navbar />
@endauth @endauth
<main> <main class="max-w-6xl pt-10 mx-auto">
{{ $slot }} {{ $slot }}
</main> </main>

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

@ -1,4 +1,4 @@
<div x-data="magicsearchbar" @slash.window="mainMenu = true"> <div x-data="magicsearchbar" @slash.window="mainMenu = true" class="pt-2">
{{-- Main --}} {{-- Main --}}
<template x-cloak x-if="isMainMenu"> <template x-cloak x-if="isMainMenu">
<div> <div>
@ -13,11 +13,11 @@
<template x-for="(item,index) in filteredItems" :key="item.name"> <template x-for="(item,index) in filteredItems" :key="item.name">
<div x-on:click="await set(item.next ?? 'server',item.name)" <div x-on:click="await set(item.next ?? 'server',item.name)"
:class="focusedIndex === index && 'magic-item-focused'" class="magic-item"> :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-green-600 rounded" x-show="item.type === 'Add'" <span class="px-2 mr-1 text-xs text-white bg-green-600 rounded" x-show="item.type === 'Add'"
x-text="item.type"></span> x-text="item.type"></span>
<span class="px-2 mr-1 text-xs bg-purple-600 rounded" x-show="item.type === 'Jump'" <span class="px-2 mr-1 text-xs text-white bg-purple-600 rounded" x-show="item.type === 'Jump'"
x-text="item.type"></span> x-text="item.type"></span>
<span class="px-2 mr-1 text-xs bg-blue-600 rounded" x-show="item.type === 'New'" <span class="px-2 mr-1 text-xs text-white bg-blue-600 rounded" x-show="item.type === 'New'"
x-text="item.type"></span> x-text="item.type"></span>
<span x-text="item.name"></span> <span x-text="item.name"></span>
</div> </div>
@ -32,10 +32,15 @@
x-on:keydown.down="focusNext(servers.length)" x-on:keydown.up="focusPrev(servers.length)" x-on:keydown.down="focusNext(servers.length)" x-on:keydown.up="focusPrev(servers.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('destination',filteredServers()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('destination',filteredServers()[focusedIndex].uuid)" />
<div class="magic-items"> <div class="magic-items">
<template x-if="servers.length === 0">
<div class="magic-item" x-on:click="set('newServer')">
<span>No server found. Click here to add a new one!</span>
</div>
</template>
<template x-for="(server,index) in filteredServers" :key="server.name ?? server"> <template x-for="(server,index) in filteredServers" :key="server.name ?? server">
<div x-on:click="await set('destination',server.uuid)" <div x-on:click="await set('destination',server.uuid)"
:class="focusedIndex === index && 'magic-item-focused'" class="magic-item"> :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span> <span class="px-2 mr-1 text-xs text-white bg-purple-600 rounded">Server</span>
<span x-text="server.name"></span> <span x-text="server.name"></span>
</div> </div>
</template> </template>
@ -47,6 +52,7 @@
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" placeholder="Select a destination..." <input class="magic-input" x-ref="search" x-model="search" placeholder="Select a destination..."
x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)" x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)"
x-on:keyup.escape="closeMenus"
x-on:keyup.enter="focusedIndex !== '' && await set('project',filteredDestinations()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('project',filteredDestinations()[focusedIndex].uuid)" />
<div class="magic-items"> <div class="magic-items">
<template x-if="destinations.length === 0"> <template x-if="destinations.length === 0">
@ -57,18 +63,19 @@
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination"> <template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
<div x-on:click="await set('project',destination.uuid)" <div x-on:click="await set('project',destination.uuid)"
:class="focusedIndex === index && 'magic-item-focused'" class="magic-item"> :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Destination</span> <span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Destination</span>
<span x-text="destination.name"></span> <span x-text="destination.name"></span>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
{{-- Projects --}} {{-- Project --}}
<template x-cloak x-if="projectMenu"> <template x-cloak x-if="projectMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" placeholder="Type your project name..." <input class="magic-input" x-ref="search" x-model="search" placeholder="Type your project name..."
x-on:keydown.down="focusNext(projects.length + 1)" x-on:keydown.up="focusPrev(projects.length + 1)" x-on:keydown.down="focusNext(projects.length + 1)" x-on:keydown.up="focusPrev(projects.length + 1)"
x-on:keyup.escape="closeMenus"
x-on:keyup.enter="focusedIndex !== '' && await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" />
<div class="magic-items"> <div class="magic-items">
<div x-on:click="await newProject" class="magic-item" <div x-on:click="await newProject" class="magic-item"
@ -79,7 +86,7 @@
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project"> <template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
<div x-on:click="await set('environment',project.uuid)" <div x-on:click="await set('environment',project.uuid)"
:class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item"> :class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Project</span> <span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Project</span>
<span x-text="project.name"></span> <span x-text="project.name"></span>
</div> </div>
</template> </template>
@ -91,7 +98,7 @@
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" placeholder="Select a environment..." <input class="magic-input" x-ref="search" x-model="search" placeholder="Select a environment..."
x-on:keydown.down="focusNext(environments.length + 1)" x-on:keydown.down="focusNext(environments.length + 1)"
x-on:keydown.up="focusPrev(environments.length + 1)" x-on:keydown.up="focusPrev(environments.length + 1)" x-on:keyup.escape="closeMenus"
x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" /> x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" />
<div class="magic-items"> <div class="magic-items">
<div x-on:click="await newEnvironment" class="magic-item" <div x-on:click="await newEnvironment" class="magic-item"
@ -102,7 +109,7 @@
<template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment"> <template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment">
<div x-on:click="await set('jump',environment.name)" <div x-on:click="await set('jump',environment.name)"
:class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item"> :class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Env</span> <span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Env</span>
<span x-text="environment.name"></span> <span x-text="environment.name"></span>
</div> </div>
</template> </template>
@ -113,14 +120,20 @@
<template x-cloak x-if="projectsMenu"> <template x-cloak x-if="projectsMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input x-ref="search" x-model="search" class="magic-input" placeholder="Select a project..." <input x-ref="search" x-model="search" class="magic-input" placeholder="Select a project..."
x-on:keydown.down="focusNext(projects.length)" x-on:keydown.up="focusPrev(projects.length)" x-on:keyup.escape="closeMenus" x-on:keydown.down="focusNext(projects.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToProject',filteredProjects()[focusedIndex].uuid)" /> x-on:keydown.up="focusPrev(projects.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToProject',filteredProjects()[focusedIndex]?.uuid)" />
<div class="magic-items"> <div class="magic-items">
<template x-if="projects.length === 0">
<div class="magic-item hover:bg-neutral-800">
<span>No projects found.</span>
</div>
</template>
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project"> <template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
<div x-on:click="await set('jumpToProject',project.uuid)" <div x-on:click="await set('jumpToProject',project.uuid)"
:class="focusedIndex === index && 'magic-item-focused'" :class="focusedIndex === index && 'magic-item-focused'"
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"> class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span> <span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Jump</span>
<span x-text="project.name"></span> <span x-text="project.name"></span>
</div> </div>
</template> </template>
@ -130,10 +143,16 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
{{-- Destinations --}} {{-- Destinations --}}
<template x-cloak x-if="destinationsMenu"> <template x-cloak x-if="destinationsMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input x-ref="search" x-model="search" class="magic-items" placeholder="Select a destination..." <input x-ref="search" x-model="search" class="magic-input" placeholder="Select a destination..."
x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)" x-on:keyup.escape="closeMenus" x-on:keydown.down="focusNext(destinations.length)"
x-on:keydown.up="focusPrev(destinations.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToDestination',filteredDestinations()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('jumpToDestination',filteredDestinations()[focusedIndex].uuid)" />
<div class="magic-items"> <div class="magic-items">
<template x-if="destinations.length === 0">
<div class="magic-item" x-on:click="set('newDestination')">
<span>No destination found. Click here to add a new one!</span>
</div>
</template>
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination"> <template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
<div x-on:click="await set('jumpToDestination',destination.uuid)" <div x-on:click="await set('jumpToDestination',destination.uuid)"
:class="focusedIndex === index && 'magic-item-focused'" :class="focusedIndex === index && 'magic-item-focused'"
@ -203,49 +222,50 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
focusedIndex: "", focusedIndex: "",
items: [{ items: [{
name: 'Server',
type: 'Add',
tags: 'new,server',
next: 'newServer'
},
{
name: 'Destination',
type: 'Add',
tags: 'new,destination',
next: 'newDestination'
},
{
name: 'Private Key',
type: 'Add',
tags: 'new,private-key,ssh,key',
next: 'newPrivateKey'
},
{
name: 'Source',
type: 'Add',
tags: 'new,source,github,gitlab,bitbucket',
next: 'newSource'
},
{
name: 'Public Repository', name: 'Public Repository',
type: 'Add', type: 'Add',
tags: 'application,public,repository', tags: 'application,public,repository,github,gitlab,bitbucket,git',
}, },
{ {
name: 'Private Repository (with GitHub App)', name: 'Private Repository (with GitHub App)',
type: 'Add', type: 'Add',
tags: 'application,private,repository', tags: 'application,private,repository,github,gitlab,bitbucket,git',
}, },
{ {
name: 'Private Repository (with Deploy Key)', name: 'Private Repository (with Deploy Key)',
type: 'Add', type: 'Add',
tags: 'application,private,repository', tags: 'application,private,repository,github,gitlab,bitbucket,git',
}, },
{ {
name: 'Database', name: 'Database',
type: 'Add', type: 'Add',
tags: 'data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona', tags: 'data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona',
}, },
{
name: 'Server',
type: 'New',
tags: 'new,server',
next: 'newServer'
},
{
name: 'Destination',
type: 'New',
tags: 'new,destination',
next: 'newDestination'
},
{
name: 'Private Key',
type: 'New',
tags: 'new,private-key,ssh,key',
next: 'newPrivateKey'
},
{
name: 'Source',
type: 'New',
tags: 'new,source,github,gitlab,bitbucket',
next: 'newSource'
},
{ {
name: 'Servers', name: 'Servers',
type: 'Jump', type: 'Jump',

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

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

84
resources/views/dashboard.blade.php
View File

@ -1,32 +1,56 @@
<x-layout> <x-layout>
<h1>Projects </h1> @if ($servers->count() === 0)
@forelse ($projects as $project) <div class="flex flex-col items-center justify-center h-full pt-32">
<a href="{{ route('project.environments', [$project->uuid]) }}">{{ data_get($project, 'name') }}</a> <div class="pb-3">Without a server, you won't be able to do much.</div>
@empty <div class="text-2xl">Let's create <a href="{{ route('server.new') }}"
<p>No projects found.</p> class="p-2 rounded bg-coollabs hover:bg-coollabs-100">your
@endforelse first</a> one!</div>
<h1>Servers </h1> </div>
@forelse ($servers as $server) @else
<a href="{{ route('server.show', [$server->uuid]) }}">{{ data_get($server, 'name') }}</a> <h1>Projects </h1>
@empty <div class="flex gap-2">
<p>No servers found.</p> @forelse ($projects as $project)
@endforelse <a href="{{ route('project.environments', [$project->uuid]) }}"
<h1>Destinations </h1> class="box">{{ data_get($project, 'name') }}</a>
@forelse ($destinations as $destination) @empty
<a href="{{ route('destination.show', [$destination->uuid]) }}">{{ data_get($destination, 'name') }}</a> <p>No projects found.</p>
@empty @endforelse
<p>No destinations found.</p> </div>
@endforelse <h1>Servers </h1>
<h1>Private Keys </h1> <div class="flex gap-2">
@forelse ($private_keys as $private_key) @forelse ($servers as $server)
<a href="{{ route('private-key.show', [$private_key->uuid]) }}">{{ data_get($private_key, 'name') }}</a> <a href="{{ route('server.show', [$server->uuid]) }}" class="box">{{ data_get($server, 'name') }}</a>
@empty @empty
<p>No servers found.</p> <p>No servers found.</p>
@endforelse @endforelse
<h1>GitHub Apps </h1> </div>
@forelse ($github_apps as $github_app) <h1>Destinations </h1>
<a href="{{ route('source.github.show', [$github_app->uuid]) }}">{{ data_get($github_app, 'name') }}</a> <div class="flex gap-2">
@empty @forelse ($destinations as $destination)
<p>No servers found.</p> <a href="{{ route('destination.show', [$destination->uuid]) }}"
@endforelse class="box">{{ data_get($destination, 'name') }}</a>
@empty
<p>No destinations found.</p>
@endforelse
</div>
<h1>Private Keys </h1>
<div class="flex gap-2">
@forelse ($private_keys as $private_key)
<a href="{{ route('private-key.show', [$private_key->uuid]) }}"
class="box">{{ data_get($private_key, 'name') }}</a>
@empty
<p>No servers found.</p>
@endforelse
</div>
<h1>GitHub Apps </h1>
<div class="flex">
@forelse ($github_apps as $github_app)
<a href="{{ route('source.github.show', [$github_app->uuid]) }}"
class="box">{{ data_get($github_app, 'name') }}</a>
@empty
<p>No servers found.</p>
@endforelse
</div>
@endif
</x-layout> </x-layout>

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

@ -1,9 +1,10 @@
<div> <div>
@isset($this->activity) <div
<span>Status: {{ $this->activity?->properties->get('status') }}</span> class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
<pre class="flex flex-col-reverse w-full overflow-y-hidden" @if ($this->activity)
@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
<span>Output will be here...</span> <pre class="whitespace-pre-wrap">Output will be here...</pre>
@endisset @endif
</div>
</div> </div>

12
resources/views/livewire/private-key/create.blade.php
View File

@ -1,10 +1,10 @@
<div> <div>
<form class="flex flex-col gap-2 w-96" wire:submit.prevent='createPrivateKey'> <form class="flex flex-col gap-2 " wire:submit.prevent='createPrivateKey'>
<x-inputs.input id="private_key_name" label="Name" required /> <x-inputs.input id="name" label="Name" required />
<x-inputs.input id="private_key_description" label="Longer Description" /> <x-inputs.input id="description" label="Description" />
<x-inputs.input type="textarea" id="private_key_value" label="Private Key" required /> <x-inputs.input type="textarea" id="value" label="Private Key" required />
<x-inputs.button type="submit"> <x-inputs.button type="submit" wire.click.prevent>
Submit Save Private Key
</x-inputs.button> </x-inputs.button>
</form> </form>
</div> </div>

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

@ -1,9 +1,13 @@
<div> <div>
<form class="flex items-end justify-center gap-2" wire:submit.prevent='runCommand'> <form class="flex items-end justify-center gap-2" wire:submit.prevent='runCommand'>
<x-inputs.input noDirty noLabel id="command" label="Command" required /> <x-inputs.input class="w-[32rem]" autofocus noDirty noLabel id="command" label="Command" required />
<select wire:model.defer="server"> <select wire:model.defer="server">
@foreach ($servers as $server) @foreach ($servers as $server)
<option value="{{ $server->uuid }}">{{ $server->name }}</option> @if ($loop->first)
<option selected value="{{ $server->uuid }}">{{ $server->name }}</option>
@else
<option value="{{ $server->uuid }}">{{ $server->name }}</option>
@endif
@endforeach @endforeach
</select> </select>
<x-inputs.button type="submit">Run</x-inputs.button> <x-inputs.button type="submit">Run</x-inputs.button>

43
resources/views/livewire/server/new/by-ip.blade.php
View File

@ -1,31 +1,32 @@
<div> <div>
<form class="flex flex-col" wire:submit.prevent='submit'> <form class="flex flex-col gap-1" wire:submit.prevent='submit'>
<div class="flex items-center gap-2">
<h1>New Server</h1>
<x-inputs.button type="submit">
Save
</x-inputs.button>
</div>
<x-inputs.input id="name" label="Name" required /> <x-inputs.input id="name" label="Name" required />
<x-inputs.input id="description" label="Description" /> <x-inputs.input id="description" label="Description" />
<x-inputs.input id="ip" label="IP Address" required /> <x-inputs.input id="ip" label="IP Address" required />
<x-inputs.input id="user" label="User" /> <x-inputs.input id="user" label="User" />
<x-inputs.input type="number" id="port" label="Port" /> <x-inputs.input type="number" id="port" label="Port" />
<x-inputs.input id="private_key_id" label="Private Key" required hidden /> <x-inputs.input id="private_key_id" label="Private Key Id" readonly hidden />
<x-inputs.button class="mt-4" type="submit">
Submit @if ($private_keys->count() > 0)
</x-inputs.button>
</form>
<div class="flex gap-4">
<div>
<h1>Select a private key</h1> <h1>Select a private key</h1>
@foreach ($private_keys as $key) @foreach ($private_keys as $key)
@if ($private_key_id == $key->id) <div class="box" :class="{ 'bg-coollabs': {{ $private_key_id === $key->id }} }"
<x-inputs.button class="bg-blue-500" wire:click.defer="setPrivateKey('{{ $key->id }}')"> wire:click.defer.prevent="setPrivateKey('{{ $key->id }}')">
{{ $key->name }}</x-inputs.button> {{ $key->name }}
@else </div>
<x-inputs.button wire:click.defer="setPrivateKey('{{ $key->id }}')">{{ $key->name }}
</x-inputs.button>
@endif
@endforeach @endforeach
</div> @endif
<div> </form>
<h2>Add a new One</h2> @if ($private_keys->count() > 0)
<livewire:private-key.create /> <h2>Or add a new private key</h2>
</div> @else
</div> <h2>Create private key</h2>
@endif
<livewire:private-key.create />
</div> </div>

1
resources/views/server/new.blade.php
View File

@ -1,4 +1,3 @@
<x-layout> <x-layout>
<h1>New Server</h1>
<livewire:server.new.by-ip /> <livewire:server.new.by-ip />
</x-layout> </x-layout>

8
routes/web.php
View File

@ -130,7 +130,13 @@
})->name('update'); })->name('update');
Route::get('/command-center', function () { Route::get('/command-center', function () {
return view('command-center'); $servers = Server::validated();
if ($servers->count() === 0) {
return redirect()->route('dashboard');
}
return view('command-center', [
'servers' => $servers,
]);
})->name('command-center'); })->name('command-center');
}); });

24
tailwind.config.js
View File

@ -6,7 +6,29 @@ module.exports = {
"./resources/**/*.vue", "./resources/**/*.vue",
], ],
theme: { theme: {
extend: {}, extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
"applications": "#16A34A",
"databases": "#9333EA",
"databases-100": "#9b46ea",
"destinations": "#0284C7",
"sources": "#EA580C",
"services": "#DB2777",
"settings": "#FEE440",
"iam": "#C026D3",
'coollabs': '#6B16ED',
'coollabs-100': '#7317FF',
'coolblack': '#141414',
'coolgray-100': '#181818',
'coolgray-200': '#202020',
'coolgray-300': '#242424',
'coolgray-400': '#282828',
'coolgray-500': '#323232'
}
},
}, },
plugins: [], plugins: [],
} }