feat: New Slack notification UI

This commit is contained in:
peaklabs-dev
2024-12-09 16:39:19 +01:00
parent 5210218a45
commit b4b48692af
2 changed files with 114 additions and 59 deletions

View File

@@ -2,6 +2,7 @@
namespace App\Livewire\Notifications; namespace App\Livewire\Notifications;
use App\Models\SlackNotificationSettings;
use App\Models\Team; use App\Models\Team;
use App\Notifications\Test; use App\Notifications\Test;
use Livewire\Attributes\Validate; use Livewire\Attributes\Validate;
@@ -11,6 +12,8 @@ class Slack extends Component
{ {
public Team $team; public Team $team;
public SlackNotificationSettings $settings;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackEnabled = false; public bool $slackEnabled = false;
@@ -18,27 +21,43 @@ class Slack extends Component
public ?string $slackWebhookUrl = null; public ?string $slackWebhookUrl = null;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackNotificationsTest = false; public bool $deploymentSuccessSlackNotifications = false;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackNotificationsDeployments = false; public bool $deploymentFailureSlackNotifications = true;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackNotificationsStatusChanges = false; public bool $statusChangeSlackNotifications = false;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackNotificationsDatabaseBackups = false; public bool $backupSuccessSlackNotifications = false;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackNotificationsScheduledTasks = false; public bool $backupFailureSlackNotifications = true;
#[Validate(['boolean'])] #[Validate(['boolean'])]
public bool $slackNotificationsServerDiskUsage = false; public bool $scheduledTaskSuccessSlackNotifications = false;
#[Validate(['boolean'])]
public bool $scheduledTaskFailureSlackNotifications = true;
#[Validate(['boolean'])]
public bool $dockerCleanupSlackNotifications = false;
#[Validate(['boolean'])]
public bool $serverDiskUsageSlackNotifications = true;
#[Validate(['boolean'])]
public bool $serverReachableSlackNotifications = false;
#[Validate(['boolean'])]
public bool $serverUnreachableSlackNotifications = true;
public function mount() public function mount()
{ {
try { try {
$this->team = auth()->user()->currentTeam(); $this->team = auth()->user()->currentTeam();
$this->settings = $this->team->slackNotificationSettings;
$this->syncData(); $this->syncData();
} catch (\Throwable $e) { } catch (\Throwable $e) {
return handleError($e, $this); return handleError($e, $this);
@@ -49,25 +68,38 @@ class Slack extends Component
{ {
if ($toModel) { if ($toModel) {
$this->validate(); $this->validate();
$this->team->slack_enabled = $this->slackEnabled; $this->settings->slack_enabled = $this->slackEnabled;
$this->team->slack_webhook_url = $this->slackWebhookUrl; $this->settings->slack_webhook_url = $this->slackWebhookUrl;
$this->team->slack_notifications_test = $this->slackNotificationsTest;
$this->team->slack_notifications_deployments = $this->slackNotificationsDeployments; $this->settings->deployment_success_slack_notifications = $this->deploymentSuccessSlackNotifications;
$this->team->slack_notifications_status_changes = $this->slackNotificationsStatusChanges; $this->settings->deployment_failure_slack_notifications = $this->deploymentFailureSlackNotifications;
$this->team->slack_notifications_database_backups = $this->slackNotificationsDatabaseBackups; $this->settings->status_change_slack_notifications = $this->statusChangeSlackNotifications;
$this->team->slack_notifications_scheduled_tasks = $this->slackNotificationsScheduledTasks; $this->settings->backup_success_slack_notifications = $this->backupSuccessSlackNotifications;
$this->team->slack_notifications_server_disk_usage = $this->slackNotificationsServerDiskUsage; $this->settings->backup_failure_slack_notifications = $this->backupFailureSlackNotifications;
$this->team->save(); $this->settings->scheduled_task_success_slack_notifications = $this->scheduledTaskSuccessSlackNotifications;
$this->settings->scheduled_task_failure_slack_notifications = $this->scheduledTaskFailureSlackNotifications;
$this->settings->docker_cleanup_slack_notifications = $this->dockerCleanupSlackNotifications;
$this->settings->server_disk_usage_slack_notifications = $this->serverDiskUsageSlackNotifications;
$this->settings->server_reachable_slack_notifications = $this->serverReachableSlackNotifications;
$this->settings->server_unreachable_slack_notifications = $this->serverUnreachableSlackNotifications;
$this->settings->save();
refreshSession(); refreshSession();
} else { } else {
$this->slackEnabled = $this->team->slack_enabled; $this->slackEnabled = $this->settings->slack_enabled;
$this->slackWebhookUrl = $this->team->slack_webhook_url; $this->slackWebhookUrl = $this->settings->slack_webhook_url;
$this->slackNotificationsTest = $this->team->slack_notifications_test;
$this->slackNotificationsDeployments = $this->team->slack_notifications_deployments; $this->deploymentSuccessSlackNotifications = $this->settings->deployment_success_slack_notifications;
$this->slackNotificationsStatusChanges = $this->team->slack_notifications_status_changes; $this->deploymentFailureSlackNotifications = $this->settings->deployment_failure_slack_notifications;
$this->slackNotificationsDatabaseBackups = $this->team->slack_notifications_database_backups; $this->statusChangeSlackNotifications = $this->settings->status_change_slack_notifications;
$this->slackNotificationsScheduledTasks = $this->team->slack_notifications_scheduled_tasks; $this->backupSuccessSlackNotifications = $this->settings->backup_success_slack_notifications;
$this->slackNotificationsServerDiskUsage = $this->team->slack_notifications_server_disk_usage; $this->backupFailureSlackNotifications = $this->settings->backup_failure_slack_notifications;
$this->scheduledTaskSuccessSlackNotifications = $this->settings->scheduled_task_success_slack_notifications;
$this->scheduledTaskFailureSlackNotifications = $this->settings->scheduled_task_failure_slack_notifications;
$this->dockerCleanupSlackNotifications = $this->settings->docker_cleanup_slack_notifications;
$this->serverDiskUsageSlackNotifications = $this->settings->server_disk_usage_slack_notifications;
$this->serverReachableSlackNotifications = $this->settings->server_reachable_slack_notifications;
$this->serverUnreachableSlackNotifications = $this->settings->server_unreachable_slack_notifications;
} }
} }
@@ -82,6 +114,7 @@ class Slack extends Component
$this->saveModel(); $this->saveModel();
} catch (\Throwable $e) { } catch (\Throwable $e) {
$this->slackEnabled = false; $this->slackEnabled = false;
return handleError($e, $this); return handleError($e, $this);
} }
} }
@@ -127,4 +160,4 @@ class Slack extends Component
{ {
return view('livewire.notifications.slack'); return view('livewire.notifications.slack');
} }
} }

View File

@@ -1,43 +1,65 @@
<div> <div>
<x-slot:title> <x-slot:title>
Notifications | Coolify Notifications | Coolify
</x-slot> </x-slot>
<x-notification.navbar /> <x-notification.navbar />
<form wire:submit='submit' class="flex flex-col gap-4"> <form wire:submit='submit' class="flex flex-col gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<h2>Slack</h2> <h2>Slack</h2>
<x-forms.button type="submit"> <x-forms.button type="submit">
Save Save
</x-forms.button>
@if ($slackEnabled)
<x-forms.button class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
wire:click="sendTestNotification">
Send Test Notification
</x-forms.button> </x-forms.button>
@if ($slackEnabled) @endif
<x-forms.button class="normal-case dark:text-white btn btn-xs no-animation btn-primary" </div>
wire:click="sendTestNotification"> <div class="w-32">
Send Test Notifications <x-forms.checkbox instantSave="instantSaveSlackEnabled" id="slackEnabled" label="Enabled" />
</x-forms.button> </div>
@endif <x-forms.input type="password"
helper="Generate a webhook in Slack.<br>Example: https://hooks.slack.com/services/...." required
id="slackWebhookUrl" label="Webhook" />
</form>
@if ($slackEnabled)
<h2 class="mt-8 mb-4">Notification Settings</h2>
<p class="mb-4">
Select events for which you would like to receive Slack notifications.
</p>
<div class="flex flex-col gap-4 max-w-2xl">
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessSlackNotifications" label="Deployment Success" />
<x-forms.checkbox instantSave="saveModel" id="deploymentFailureSlackNotifications" label="Deployment Failure" />
<x-forms.checkbox instantSave="saveModel" helper="Send a notification when a container status changes. It will notify for Stopped and Restarted events of a container." id="statusChangeSlackNotifications" label="Container Status Changes" />
</div>
</div> </div>
<div class="w-32"> <div class="border dark:border-coolgray-300 p-4 rounded-lg">
<x-forms.checkbox instantSave="instantSaveSlackEnabled" id="slackEnabled" label="Enabled" /> <h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessSlackNotifications" label="Backup Success" />
<x-forms.checkbox instantSave="saveModel" id="backupFailureSlackNotifications" label="Backup Failure" />
</div>
</div> </div>
<x-forms.input type="password" <div class="border dark:border-coolgray-300 p-4 rounded-lg">
helper="Generate a webhook in Slack.<br>Example: https://hooks.slack.com/services/...." required <h3 class="font-medium mb-3">Scheduled Tasks</h3>
id="slackWebhookUrl" label="Webhook" /> <div class="flex flex-col gap-1.5 pl-1">
</form> <x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessSlackNotifications" label="Scheduled Task Success" />
@if ($slackEnabled) <x-forms.checkbox instantSave="saveModel" id="scheduledTaskFailureSlackNotifications" label="Scheduled Task Failure" />
<h2 class="mt-4">Subscribe to events</h2> </div>
<div class="w-64">
@if (isDev())
<x-forms.checkbox instantSave="saveModel" id="slackNotificationsTest" label="Test" />
@endif
<x-forms.checkbox instantSave="saveModel" id="slackNotificationsStatusChanges"
label="Container Status Changes" />
<x-forms.checkbox instantSave="saveModel" id="slackNotificationsDeployments"
label="Application Deployments" />
<x-forms.checkbox instantSave="saveModel" id="slackNotificationsDatabaseBackups" label="Backup Status" />
<x-forms.checkbox instantSave="saveModel" id="slackNotificationsScheduledTasks"
label="Scheduled Tasks Status" />
<x-forms.checkbox instantSave="saveModel" id="slackNotificationsServerDiskUsage"
label="Server Disk Usage" />
</div> </div>
@endif <div class="border dark:border-coolgray-300 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" helper="Send a notification when Docker Cleanup is run on a server." id="dockerCleanupSlackNotifications" label="Docker Cleanup" />
<x-forms.checkbox instantSave="saveModel" helper="Send a notification when server disk usage is high." id="serverDiskUsageSlackNotifications" label="Server Disk Usage" />
<x-forms.checkbox instantSave="saveModel" id="serverReachableSlackNotifications" label="Server Reachable" />
<x-forms.checkbox instantSave="saveModel" id="serverUnreachableSlackNotifications" label="Server Unreachable" />
</div>
</div>
</div>
@endif
</div> </div>