Add Grafana integration and service health check features

Author: codeyourweb

config/grafana/grafana.ini

@@ -0,0 +1,7 @@
+[security]
+allow_embedding = true
+cookie_samesite = none
+cookie_secure = false
+
+[server]
+enable_gzip = true

docker-compose.yml

@@ -5,8 +5,11 @@ services:
     hostname: ${SENTINELKIT_FRONTEND_HOSTNAME}
     working_dir: /app
     environment:
-      - VITE_ALLOWED_HOSTS=.${SENTINELKIT_FRONTEND_HOSTNAME}
+      - VITE_ALLOWED_HOSTS=${SENTINELKIT_FRONTEND_HOSTNAME},${SENTINELKIT_BACKEND_HOSTNAME},${SENTINELKIT_KIBANA_HOSTNAME},${SENTINELKIT_GRAFANA_HOSTNAME}
       - VITE_API_BASE_URL=https://${SENTINELKIT_BACKEND_HOSTNAME}/api
+      - VITE_BACKEND_URL=https://${SENTINELKIT_BACKEND_HOSTNAME}
+      - VITE_KIBANA_URL=https://${SENTINELKIT_KIBANA_HOSTNAME}
+      - VITE_GRAFANA_URL=https://${SENTINELKIT_GRAFANA_HOSTNAME}
     volumes:
       - ./sentinel-kit_server_frontend:/app
     command: sh -c "npm install && npm run dev -- --host '0.0.0.0' --port 3000"
@@ -339,10 +342,12 @@ services:
       - ./data/grafana:/var/lib/grafana
       - ./config/grafana/datasources:/etc/grafana/provisioning/datasources
       - ./config/grafana/dashboards:/etc/grafana/provisioning/dashboards
+      - ./config/grafana/grafana.ini:/etc/grafana/grafana.ini
     environment:
       - GF_SECURITY_ADMIN_USER=${GF_SECURITY_ADMIN_USER}
       - GF_SECURITY_ADMIN_PASSWORD=${GF_SECURITY_ADMIN_PASSWORD}
       - GF_SERVER_HTTP_PORT=3000
+      - GF_SECURITY_ALLOW_EMBEDDING=true
       - ES_PASSWORD=${ELASTICSEARCH_PASSWORD}
       - MYSQL_DATABASE=${MYSQL_DATABASE}
       - MYSQL_USER=${MYSQL_USER}

sentinel-kit_server_backend/src/Controller/MainController.php

@@ -7,17 +7,98 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Contracts\HttpClient\HttpClientInterface;
 use App\Repository\ServerTokenRepository;
 use Doctrine\ORM\EntityManagerInterface;
 use App\Entity\Agent;
 
 final class MainController extends AbstractController
 {
+    private $httpClient;
+
+    function __construct(HttpClientInterface $httpClient)
+    {
+        $this->httpClient = $httpClient;
+    }
+
     #[Route('/', name: 'app_main')]
     public function index(): Response
     {
         return $this->render('main/index.html.twig', [
             'controller_name' => 'MainController',
         ]);
     }
+
+
+    #[Route('/api/health-check/{service}', name: 'app_service_health_check', methods: ['GET', 'HEAD'])]
+    public function serviceHealthCheck(string $service): JsonResponse
+    {
+        $services = [
+            'kibana' => 'http://sentinel-kit-utils-kibana:5601',
+            'grafana' => 'http://sentinel-kit-utils-grafana:3000',
+            'backend' => 'http://sentinel-kit-app-backend:8000'
+        ];
+
+        if (!isset($services[$service])) {
+            return new JsonResponse([
+                'service' => $service,
+                'status' => 'error',
+                'error' => 'Unknown service'
+            ], Response::HTTP_BAD_REQUEST);
+        }
+
+        $url = $services[$service];
+        
+        try {
+            $response = $this->httpClient->request('GET', $url, [
+                'timeout' => 10,
+                'verify_peer' => false,
+                'verify_host' => false,
+                'max_redirects' => 0
+            ]);
+            $statusCode = $response->getStatusCode();
+            
+            if ($statusCode >= 200 && $statusCode < 400) {
+                $status = 'healthy';
+                $error = null;
+            } else {
+                $status = 'unhealthy';
+                $error = $this->getErrorMessage($statusCode);
+            }
+            
+            return new JsonResponse([
+                'service' => $service,
+                'url' => $url,
+                'status' => $status,
+                'error' => $error,
+                'httpStatus' => $statusCode,
+                'lastChecked' => (new \DateTime())->format('c')
+            ], Response::HTTP_OK);
+            
+        } catch (\Exception $e) {
+            return new JsonResponse([
+                'service' => $service,
+                'url' => $url,
+                'status' => 'unhealthy',
+                'error' => 'Connection failed: ' . $e->getMessage(),
+                'httpStatus' => null,
+                'lastChecked' => (new \DateTime())->format('c')
+            ], Response::HTTP_OK);
+        }
+    }
+
+    private function getErrorMessage(int $statusCode): string
+    {
+        return match($statusCode) {
+            502 => 'Bad Gateway: Service is down or unreachable',
+            503 => 'Service Unavailable: Service is temporarily down',
+            504 => 'Gateway Timeout: Service is not responding',
+            500 => 'Internal Server Error: Service has internal issues',
+            404 => 'Not Found: Service endpoint not found',
+            403 => 'Forbidden: Access denied',
+            401 => 'Unauthorized: Authentication required',
+            302, 301 => 'Redirect: Service is redirecting requests',
+            default => "HTTP $statusCode: Service returned error status"
+        };
+    }
 }

sentinel-kit_server_frontend/index.html

@@ -1,5 +1,5 @@
-<!doctype html data-theme="claude">
-<html lang="en">
+<!DOCTYPE html>
+<html lang="en" data-theme="claude">
   <head>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="/src/style.css" />

sentinel-kit_server_frontend/src/App.vue

@@ -1,4 +1,6 @@
 <template>
+    <SSLChecker />
+    
     <div class="flex h-screen w-screen bg-gray-50">
         <!-- Side menu -->
         <aside v-if="isLoggedIn" :class="{ 'w-64': !isCollapsed, 'w-20': isCollapsed }" class="flex flex-col bg-gray-800 text-white transition-all duration-300 ease-in-out shadow-lg fixed h-full z-20">
@@ -112,6 +114,7 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter, RouterView, RouterLink } from 'vue-router';
+import SSLChecker from './components/SSLChecker.vue';
 
 const router = useRouter();
 const isLoggedIn = ref(false);
@@ -163,11 +166,11 @@ const logout = () => {
 // Side menu items
 const menuItems = [
 { name: 'Home', icon: 'icon-[svg-spinners--blocks-wave]', route: 'Home' },
-{ name: 'Kibana', icon: 'icon-[solar--presentation-graph-bold]', route: 'Kibana' },
+{ name: 'Logs', icon: 'icon-[solar--presentation-graph-bold]', route: 'Kibana' },
 { name: 'Rulesets', icon: 'icon-[mdi--account-child]', route: 'RulesList' },
 { name: 'Detections', icon: 'icon-[solar--eye-scan-broken]', route: 'Home' },
 { name: 'Assets & groups', icon: 'icon-[line-md--computer-twotone]', route: 'Home' },
-{ name: 'Settings', icon: 'icon-[solar--settings-bold-duotone]', route: 'Home' }
+{ name: 'Monitoring', icon: 'icon-[material-symbols--monitor-heart-outline]', route: 'Grafana' }
 ];
 </script>
 

sentinel-kit_server_frontend/src/components/LoginOTPForm.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 
 const isInvalid = ref(false);
 const otp = ref(['', '', '', '', '', '']);
-const emit = defineEmits(['postauth-success']);
+const emit = defineEmits(['postauth-success', 'showNotification']);
 const props = defineProps({
     postAuthUrl: {
         type: String,

sentinel-kit_server_frontend/src/components/LoginPasswordForm.vue

@@ -24,7 +24,7 @@ const BASE_URL = import.meta.env.VITE_API_BASE_URL;
 const email = ref('');
 const password = ref('');
 const isInvalid = ref(false);
-const emit = defineEmits(['preauth-success']);
+const emit = defineEmits(['preauth-success', 'showNotification']);
 
 watch([email, password], () => {
     isInvalid.value = false;