From f3ebaafdf6659e220632e0b69f5c236887611a09 Mon Sep 17 00:00:00 2001
From: kimatata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 12 Jul 2025 18:33:45 +0900
Subject: [PATCH] feat: add health check page (#244)

---
 backend/routes/health/index.js                | 10 +++
 backend/routes/index.js                       |  2 +-
 backend/server.js                             |  4 +
 frontend/components/Footer.tsx                | 18 ++++
 frontend/messages/en.json                     |  8 ++
 frontend/messages/ja.json                     |  8 ++
 .../src/app/[locale]/HeaderNavbarMenu.tsx     |  7 --
 frontend/src/app/[locale]/LandingPage.tsx     |  5 +-
 frontend/src/app/[locale]/PaneMainTitle.tsx   |  1 -
 .../src/app/[locale]/health/HealthPage.tsx    | 85 +++++++++++++++++++
 frontend/src/app/[locale]/health/page.tsx     | 32 +++++++
 frontend/types/health.ts                      |  8 ++
 12 files changed, 176 insertions(+), 12 deletions(-)
 create mode 100644 backend/routes/health/index.js
 create mode 100644 frontend/components/Footer.tsx
 create mode 100644 frontend/src/app/[locale]/health/HealthPage.tsx
 create mode 100644 frontend/src/app/[locale]/health/page.tsx
 create mode 100644 frontend/types/health.ts

diff --git a/backend/routes/health/index.js b/backend/routes/health/index.js
new file mode 100644
index 0000000..6252d2c
--- /dev/null
+++ b/backend/routes/health/index.js
@@ -0,0 +1,10 @@
+const express = require('express');
+const router = express.Router();
+
+module.exports = function () {
+  router.get('/', async (req, res) => {
+    res.json({ status: 'ok' });
+  });
+
+  return router;
+};
diff --git a/backend/routes/index.js b/backend/routes/index.js
index 5ca1411..8424234 100644
--- a/backend/routes/index.js
+++ b/backend/routes/index.js
@@ -3,7 +3,7 @@ const router = express.Router();
 
 // "/" GET
 router.get('/', (req, res) => {
-  res.send('Test Case Management API Server');
+  res.send('This is UnitTCMS API server');
 });
 
 module.exports = router;
diff --git a/backend/server.js b/backend/server.js
index 99270c6..062ef73 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -39,6 +39,10 @@ const sequelize = new Sequelize({
 const indexRoute = require('./routes/index');
 app.use('/', indexRoute);
 
+// "/health"
+const healthIndexRoute = require('./routes/health/index')();
+app.use('/health', healthIndexRoute);
+
 // "users"
 const usersIndexRoute = require('./routes/users/index')(sequelize);
 const usersFindRoute = require('./routes/users/find')(sequelize);
diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
new file mode 100644
index 0000000..649c096
--- /dev/null
+++ b/frontend/components/Footer.tsx
@@ -0,0 +1,18 @@
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
+import { LocaleCodeType } from '@/types/locale';
+
+type Props = {
+  locale: LocaleCodeType;
+};
+
+export default function Footer({ locale }: Props) {
+  return (
+    <div className="w-full text-center py-2 px-6 flex flex-wrap justify-center items-center gap-4">
+      <div>Copyright © 2024-present UnitTCMS</div>
+
+      <Link href={'/health'} locale={locale} className={`${NextUiLinkClasses} text-gray-500 hover:text-gray-700`}>
+        Status
+      </Link>
+    </div>
+  );
+}
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 409a0e4..aebb48e 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -114,6 +114,14 @@
     "not_own_any_projects": "You don't own any projects.",
     "find_projects": "Find projects"
   },
+  "Health": {
+    "health_check": "Health Check",
+    "status": "Status",
+    "ok": "OK",
+    "error": "Error",
+    "api_server": "API Server",
+    "unittcms_version": "UnitTCMS Version"
+  },
   "Admin": {
     "user_management": "User Management",
     "avatar": "Avatar",
diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json
index ccd1632..621bede 100644
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -133,6 +133,14 @@
     "lost_admin_auth": "管理者権限を失いました",
     "at_least": "最低1人以上の管理者が必要です。"
   },
+  "Health": {
+    "health_check": "ヘルスチェック",
+    "status": "ステータス",
+    "ok": "正常",
+    "error": "エラー",
+    "api_server": "APIサーバー",
+    "unittcms_version": "UnitTCMS バージョン"
+  },
   "Projects": {
     "project_list": "プロジェクト一覧",
     "new_project": "新規プロジェクト",
diff --git a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
index c8ff589..dc2f90b 100644
--- a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
+++ b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
@@ -97,13 +97,6 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
             <p className="font-bold text-inherit ms-1">UnitTCMS</p>
           </Link>
         </NavbarBrand>
-        <NavbarItem className="hidden md:block">
-          <Chip size="sm" variant="flat">
-            <Link className="data-[active=true]:text-primary data-[active=true]:font-medium" href="/" locale={locale}>
-              1.0.0-beta.14
-            </Link>
-          </Chip>
-        </NavbarItem>
         {commonLinks.map((link) =>
           link.isExternal ? (
             <NavbarItem key={link.uid} className="hidden md:block">
diff --git a/frontend/src/app/[locale]/LandingPage.tsx b/frontend/src/app/[locale]/LandingPage.tsx
index 0dd7701..584a4bf 100644
--- a/frontend/src/app/[locale]/LandingPage.tsx
+++ b/frontend/src/app/[locale]/LandingPage.tsx
@@ -6,6 +6,7 @@ import DemoImage from './DemoImage';
 import { title, subtitle } from '@/components/primitives';
 import { PageType } from '@/types/base';
 import { LocaleCodeType } from '@/types/locale';
+import Footer from '@/components/Footer';
 
 export default function LandingPage({ params }: PageType) {
   const t = useTranslations('Index');
@@ -98,9 +99,7 @@ export default function LandingPage({ params }: PageType) {
       </div>
 
       <Divider className="my-12" />
-      <div className="w-full text-center py-2">
-        <div>Copyright © 2024-present UnitTCMS</div>
-      </div>
+      <Footer locale={params.locale as LocaleCodeType} />
     </section>
   );
 }
diff --git a/frontend/src/app/[locale]/PaneMainTitle.tsx b/frontend/src/app/[locale]/PaneMainTitle.tsx
index ec1e178..ee98cdf 100644
--- a/frontend/src/app/[locale]/PaneMainTitle.tsx
+++ b/frontend/src/app/[locale]/PaneMainTitle.tsx
@@ -1,5 +1,4 @@
 import { Button, Link as NextUiLink } from '@heroui/react';
-import { MoveUpRight } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { title, subtitle } from '@/components/primitives';
 import { LocaleCodeType } from '@/types/locale';
diff --git a/frontend/src/app/[locale]/health/HealthPage.tsx b/frontend/src/app/[locale]/health/HealthPage.tsx
new file mode 100644
index 0000000..86ef4b7
--- /dev/null
+++ b/frontend/src/app/[locale]/health/HealthPage.tsx
@@ -0,0 +1,85 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { Table, TableBody, TableRow, TableHeader, TableCell, Chip, TableColumn } from '@heroui/react';
+import { LocaleCodeType } from '@/types/locale';
+import { HealthMessages } from '@/types/health';
+import Config from '@/config/config';
+const apiServer = Config.apiServer;
+
+type Props = {
+  messages: HealthMessages;
+  locale: LocaleCodeType;
+};
+
+async function fetchHealth() {
+  const url = `${apiServer}/health`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.log('Error fetching health data:', error);
+  }
+}
+
+export default function HealthPage({ messages, locale }: Props) {
+  const [isFetching, setIsFetching] = useState<boolean>(true);
+  const [status, setStatus] = useState<string>('loading...');
+  const apiOrigin = Config.apiServer;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        setIsFetching(true);
+        const data = await fetchHealth();
+        setStatus(data.status);
+        setIsFetching(false);
+      } catch (error: any) {
+        console.error('Error in effect:', error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, [locale]);
+
+  return (
+    <>
+      <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+        <div className="w-full p-3 flex items-center justify-between">
+          <h3 className="font-bold">{messages.health_check}</h3>
+        </div>
+
+        <Table hideHeader aria-label="API server status">
+          <TableHeader>
+            <TableColumn>dummy</TableColumn>
+            <TableColumn>dummy</TableColumn>
+          </TableHeader>
+          <TableBody>
+            <TableRow key="1">
+              <TableCell>{messages.unittcms_version}</TableCell>
+              <TableCell>1.0.0-beta.14</TableCell>
+            </TableRow>
+            <TableRow key="2">
+              <TableCell>{messages.api_server}</TableCell>
+              <TableCell>{apiOrigin}</TableCell>
+            </TableRow>
+            <TableRow key="3">
+              <TableCell>{messages.status}</TableCell>
+              <TableCell>
+                {isFetching ? (
+                  <Chip>Loading...</Chip>
+                ) : (
+                  <Chip color={status === 'ok' ? 'success' : 'danger'}>{status}</Chip>
+                )}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/app/[locale]/health/page.tsx b/frontend/src/app/[locale]/health/page.tsx
new file mode 100644
index 0000000..cac86ae
--- /dev/null
+++ b/frontend/src/app/[locale]/health/page.tsx
@@ -0,0 +1,32 @@
+import { getTranslations } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
+import HealthPage from './HealthPage';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
+import { HealthMessages } from '@/types/health';
+
+export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
+  const t = await getTranslations({ locale, namespace: 'Health' });
+  return {
+    title: `${t('health_check')} | UnitTCMS`,
+    robots: { index: false, follow: false },
+  };
+}
+
+export default function Page({ params }: PageType) {
+  const t = useTranslations('Health');
+  const messages: HealthMessages = {
+    health_check: t('health_check'),
+    status: t('status'),
+    ok: t('ok'),
+    error: t('error'),
+    api_server: t('api_server'),
+    unittcms_version: t('unittcms_version'),
+  };
+
+  return (
+    <div className="w-full flex items-center justify-center">
+      <HealthPage messages={messages} locale={params.locale as LocaleCodeType} />
+    </div>
+  );
+}
diff --git a/frontend/types/health.ts b/frontend/types/health.ts
new file mode 100644
index 0000000..e0c6d38
--- /dev/null
+++ b/frontend/types/health.ts
@@ -0,0 +1,8 @@
+export type HealthMessages = {
+  health_check: string;
+  status: string;
+  ok: string;
+  error: string;
+  api_server: string;
+  unittcms_version: string;
+};