feature: Log rotation and missing page views

limanmys · Aug 8, 2023 · 92cc8d3 · 92cc8d3
1 parent d4714c4
commit 92cc8d3
Show file tree

Hide file tree

Showing 6 changed files with 234 additions and 85 deletions.
diff --git a/src/components/_layout/advanced_layout.tsx b/src/components/_layout/advanced_layout.tsx
@@ -1,4 +1,4 @@
-import { Award, CloudCog } from "lucide-react"
+import { Award, CloudCog, ScrollText } from "lucide-react"
 
 import AccessCard from "../settings/access-card"
 
@@ -26,6 +26,15 @@ export default function AdvancedLayout({
       href: `/settings/advanced/dns`,
       enabled: true,
     },
+    {
+      id: "log_rotation",
+      icon: ScrollText,
+      title: "Log Yönlendirme",
+      description:
+        "Liman'ın önemli sistem loglarını ve mesajlarını rsyslog aracılığı ile yönlendirmenizi sağlar.",
+      href: `/settings/advanced/log_rotation`,
+      enabled: true,
+    },
   ]
 
   return (

diff --git a/src/lib/settings.ts b/src/lib/settings.ts
@@ -34,7 +34,7 @@ export const Settings = {
       description:
         "Kişisel erişim anahtarları oluşturarak Liman MYS'nin sağladığı dış API uçlarını kullanabilirsiniz.",
       icon: KeySquare,
-      href: "/settings/access_tokens",
+      href: "/settings/tokens",
     },
   ],
   system: [

diff --git a/src/pages/settings/access_tokens/index.tsx b/src/pages/settings/access_tokens/index.tsx
diff --git a/src/pages/settings/advanced/log_rotation.tsx b/src/pages/settings/advanced/log_rotation.tsx
@@ -0,0 +1,134 @@
+import { ReactElement } from "react"
+import { NextPageWithLayout } from "@/pages/_app"
+import { apiService } from "@/services"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Save } from "lucide-react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import PageHeader from "@/components/ui/page-header"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useToast } from "@/components/ui/use-toast"
+import AdvancedLayout from "@/components/_layout/advanced_layout"
+import { Form, FormField, FormMessage } from "@/components/form/form"
+
+const formSchema = z.object({
+  type: z.string().nonempty("Bir tip seçimi yapınız."),
+  ip_address: z.string().nonempty("IP adresi boş bırakılamaz."),
+  port: z.string().nonempty("Port boş bırakılamaz."),
+})
+
+const AdvancedLogRotationPage: NextPageWithLayout = () => {
+  const { toast } = useToast()
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const handleSave = (data: z.infer<typeof formSchema>) => {
+    apiService
+      .getInstance()
+      .post("/settings/advanced/log_rotation", data)
+      .then(() => {
+        toast({
+          title: "Başarılı",
+          description: "Log yönlendirme ayarları başarıyla kaydedildi.",
+        })
+      })
+      .catch(() => {
+        toast({
+          title: "Hata",
+          description:
+            "Log yönlendirme ayarları kaydedilirken bir hata oluştu.",
+          variant: "destructive",
+        })
+      })
+  }
+
+  return (
+    <>
+      <PageHeader
+        title="Log Yönlendirme Ayarları"
+        description="Liman'ın önemli sistem loglarını ve mesajlarını rsyslog aracılığı ile yönlendirmenizi sağlar."
+      />
+
+      <div className="px-8">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSave)} className="space-y-5">
+            <FormField
+              control={form.control}
+              name="ip_address"
+              render={({ field }) => (
+                <div className="flex flex-col gap-3">
+                  <Label htmlFor="ip_address">IP Adresi</Label>
+                  <div className="relative">
+                    <Input id="ip_address" {...field} />
+                  </div>
+                  <FormMessage />
+                </div>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="port"
+              render={({ field }) => (
+                <div className="flex flex-col gap-3">
+                  <Label htmlFor="port">Port</Label>
+                  <div className="relative">
+                    <Input id="port" {...field} />
+                  </div>
+                  <FormMessage />
+                </div>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <div className="flex flex-col gap-3">
+                  <Label htmlFor="type">Bağlantı Türü</Label>
+                  <div className="relative">
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Bir bağlantı türü seçiniz." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="tcp">TCP</SelectItem>
+                        <SelectItem value="udp">UDP</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <FormMessage />
+                </div>
+              )}
+            />
+
+            <div className="flex justify-end">
+              <Button type="submit">
+                <Save className="mr-2 h-4 w-4" />
+                Kaydet
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </>
+  )
+}
+
+AdvancedLogRotationPage.getLayout = function getLayout(page: ReactElement) {
+  return <AdvancedLayout>{page}</AdvancedLayout>
+}
+
+export default AdvancedLogRotationPage
diff --git a/src/pages/settings/health/index.tsx b/src/pages/settings/health/index.tsx
@@ -1,45 +1,48 @@
-import { Settings } from "@/lib/settings"
-import SettingCard from "@/components/settings/setting-card"
+import { useRouter } from "next/router"
+import { ArrowLeft } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/ui/icons"
+import PageHeader from "@/components/ui/page-header"
+
+export default function HealthPage() {
+  const router = useRouter()
 
-export default function SettingsPage() {
   return (
-    <div className="h-full flex-1 flex-col p-8 md:flex">
-      <div className="mb-8 flex items-center justify-between space-y-2">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Ayarlar</h2>
-          <p className="text-muted-foreground">
-            Bu sayfa aracılığıyla kişisel ayarlarınızı ve Liman MYS&apos;nin
-            sistem ayarlarını yapabilirsiniz.
+    <>
+      <PageHeader
+        title="Sağlık Durumu"
+        description="Liman Merkezi Yönetim Sistemi'nin sağlık durumunu görüntüleyebilir, güvenlik geliştirme önerilerini kolayca uygulayabilirsiniz."
+      />
+
+      <div
+        className="container mx-auto flex items-center px-6 py-12"
+        style={{ height: "calc(var(--container-height) - 30vh)" }}
+      >
+        <div className="mx-auto flex max-w-sm flex-col items-center text-center">
+          <Icons.dugumluLogo className="w-18 mb-10 h-12" />
+          <h1 className="mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
+            Bir hata oluştu
+          </h1>
+          <p className="mt-4 text-gray-500 dark:text-gray-400">
+            Bu sayfa henüz geliştirilmedi.
           </p>
+          <div className="mt-6 flex w-full shrink-0 items-center gap-x-3 sm:w-auto">
+            <Button onClick={() => router.back()} size="sm">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Geri dön
+            </Button>
+            <Button
+              onClick={() => router.push("/")}
+              size="sm"
+              className="px-4"
+              variant="secondary"
+            >
+              Panoya git
+            </Button>
+          </div>
         </div>
       </div>
-
-      <h2 className="mb-3 text-xl font-bold tracking-tight">
-        Kullanıcı Ayarları
-      </h2>
-      <div className="mb-8 grid grid-cols-3 gap-8">
-        {Settings.user.map((setting) => (
-          <SettingCard
-            href={setting.href}
-            icon={setting.icon}
-            title={setting.title}
-            description={setting.description}
-            key={setting.href}
-          />
-        ))}
-      </div>
-      <h2 className="mb-3 text-xl font-bold tracking-tight">Sistem Ayarları</h2>
-      <div className="grid grid-cols-3 gap-8">
-        {Settings.system.map((setting) => (
-          <SettingCard
-            href={setting.href}
-            icon={setting.icon}
-            title={setting.title}
-            description={setting.description}
-            key={setting.href}
-          />
-        ))}
-      </div>
-    </div>
+    </>
   )
 }
diff --git a/src/pages/settings/tokens/index.tsx b/src/pages/settings/tokens/index.tsx
@@ -0,0 +1,48 @@
+import { useRouter } from "next/router"
+import { ArrowLeft } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/ui/icons"
+import PageHeader from "@/components/ui/page-header"
+
+export default function TokensPage() {
+  const router = useRouter()
+
+  return (
+    <>
+      <PageHeader
+        title="Kişisel Erişim Anahtarları"
+        description="Kişisel erişim anahtarları oluşturarak Liman MYS'nin sağladığı dış API uçlarını kullanabilirsiniz."
+      />
+
+      <div
+        className="container mx-auto flex items-center px-6 py-12"
+        style={{ height: "calc(var(--container-height) - 30vh)" }}
+      >
+        <div className="mx-auto flex max-w-sm flex-col items-center text-center">
+          <Icons.dugumluLogo className="w-18 mb-10 h-12" />
+          <h1 className="mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
+            Bir hata oluştu
+          </h1>
+          <p className="mt-4 text-gray-500 dark:text-gray-400">
+            Bu sayfa henüz geliştirilmedi.
+          </p>
+          <div className="mt-6 flex w-full shrink-0 items-center gap-x-3 sm:w-auto">
+            <Button onClick={() => router.back()} size="sm">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Geri dön
+            </Button>
+            <Button
+              onClick={() => router.push("/")}
+              size="sm"
+              className="px-4"
+              variant="secondary"
+            >
+              Panoya git
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}