Replace old settings page with new SettingsLayout for alert-channels route

- Create new AlertChannels component with proper layout
- Update routing to use SettingsLayout instead of old Settings component
- Add placeholder content for alert channels functionality
- Remove dependency on old settings server page
This commit is contained in:
Muhammad Ibrahim
2025-09-30 22:51:15 +01:00
parent af62a466c8
commit d6db557d87
2 changed files with 81 additions and 1 deletions

View File

@@ -17,6 +17,7 @@ import Profile from "./pages/Profile";
import Repositories from "./pages/Repositories";
import RepositoryDetail from "./pages/RepositoryDetail";
import Settings from "./pages/Settings";
import AlertChannels from "./pages/settings/AlertChannels";
import SettingsAgentConfig from "./pages/settings/SettingsAgentConfig";
import SettingsHostGroups from "./pages/settings/SettingsHostGroups";
import SettingsServerConfig from "./pages/settings/SettingsServerConfig";
@@ -238,7 +239,9 @@ function AppRoutes() {
element={
<ProtectedRoute requirePermission="can_manage_settings">
<Layout>
<Settings />
<SettingsLayout>
<AlertChannels />
</SettingsLayout>
</Layout>
</ProtectedRoute>
}

View File

@@ -0,0 +1,77 @@
import { Bell, Plus } from "lucide-react";
const AlertChannels = () => {
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
Alert Channels
</h1>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
Configure how PatchMon sends notifications and alerts
</p>
</div>
<button type="button" className="btn-primary flex items-center gap-2">
<Plus className="h-4 w-4" />
Add Channel
</button>
</div>
{/* Coming Soon Card */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
<div className="flex items-center gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
<Bell className="h-6 w-6 text-primary-600 dark:text-primary-400" />
</div>
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
Alert Channels Coming Soon
</h3>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
We're working on adding support for multiple alert channels
including email, Slack, Discord, and webhooks.
</p>
<div className="mt-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
In Development
</span>
</div>
</div>
</div>
</div>
{/* Placeholder for future channels */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg">
<div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
Alert Channels
</h3>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
No alert channels configured yet
</p>
</div>
<div className="px-6 py-8 text-center">
<Bell className="mx-auto h-12 w-12 text-secondary-400" />
<h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">
No channels
</h3>
<p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
Get started by adding your first alert channel.
</p>
<div className="mt-6">
<button type="button" className="btn-primary">
<Plus className="h-4 w-4 mr-2" />
Add Channel
</button>
</div>
</div>
</div>
</div>
);
};
export default AlertChannels;