FIX (healthckeck): Fix data formats on UI

Author: RostislavDugin

README.md

@@ -39,7 +39,7 @@
 
 ### 🐘 **PostgreSQL Support**
 
-- **Multiple versions**: PostgreSQL 13, 14, 15, 16, and 17
+- **Multiple versions**: PostgreSQL 13, 14, 15, 16 and 17
 - **SSL support**: Secure connections available
 - **Easy restoration**: One-click restore from any backup
 
@@ -49,6 +49,14 @@
 - **Privacy-first**: All your data stays on your infrastructure
 - **Open source**: MIT licensed, inspect every line of code
 
+### 📊 **Monitoring & Insights**
+
+- **Real-time metrics**: Track database health
+- **Historical data**: View trends and patterns over time
+- **Alert system**: Get notified when issues are detected
+
+<img src="assets/healthchecks.svg" alt="Postgresus Dashboard" width="800"/>
+
 ---
 
 ## 📦 Installation
@@ -148,4 +156,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
 
-To see diagrams it is recommended to install "Markdown Preview Enhanced" plugin
+To see diagrams it is recommended to install "Markdown Preview Enhanced" plugin

assets/dashboard.svg

@@ -36,7 +36,7 @@ export const DatabaseCardComponent = ({
         {database.healthStatus && (
           <div className="ml-auto pl-1">
             <div
-              className={`rounded p-1 px-2 text-xs text-white ${
+              className={`rounded px-[6px] py-[2px] text-[10px] text-white ${
                 database.healthStatus === HealthStatus.AVAILABLE ? 'bg-green-500' : 'bg-red-500'
               }`}
             >

assets/healthchecks.svg

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import type { Database } from '../../../entity/databases';
 import { HealthStatus } from '../../../entity/databases/model/HealthStatus';
 import { type HealthcheckAttempt, healthcheckAttemptApi } from '../../../entity/healthcheck';
+import { getUserShortTimeFormat } from '../../../shared/time/getUserTimeFormat';
 
 interface Props {
   database: Database;
@@ -115,7 +116,7 @@ export const HealthckeckAttemptsComponent = ({ database }: Props) => {
             healthcheckAttempts.map((healthcheckAttempt) => (
               <Tooltip
                 key={healthcheckAttempt.createdAt.toString()}
-                title={`${dayjs(healthcheckAttempt.createdAt).format('DD.MM.YYYY HH:mm')} (${dayjs(healthcheckAttempt.createdAt).fromNow()})`}
+                title={`${dayjs(healthcheckAttempt.createdAt).format(getUserShortTimeFormat().format)} (${dayjs(healthcheckAttempt.createdAt).fromNow()})`}
               >
                 <div
                   className={`h-[8px] w-[8px] cursor-pointer rounded-[2px] ${

frontend/src/features/databases/ui/DatabaseCardComponent.tsx

@@ -18,6 +18,6 @@ export const getUserShortTimeFormat = () => {
 
   return {
     use12Hours: is12Hour,
-    format: is12Hour ? 'DD.MM.YYYY h:mm A' : 'DD.MM.YYYY HH:mm',
+    format: is12Hour ? 'DD MMM YYYY h:mm A' : 'DD MMM YYYY HH:mm',
   };
 };