Monitoring temps réel avec Grafana intégré

Le système de monitoring temps réel de Logiserv intègre nativement Grafana pour vous offrir des tableaux de bord interactifs et des visualisations avancées de vos infrastructures, directement dans votre interface web.

Architecture du monitoring temps réel

graph TD
    A[Agents Zabbix] --> B[Serveur Zabbix]
    B --> C[Base de données Zabbix]
    C --> D[Grafana Server]
    D --> E[Proxy d'authentification]
    E --> F[Interface Logiserv]
    F --> G[Utilisateur final]

Accès unifié et sécurisé

Dans la section Temps réel de votre tableau de bord, vous accédez directement à Grafana sans authentification supplémentaire grâce à notre système de proxy intégré.

Authentification transparente

// Système d'authentification automatique
const grafanaProxyBaseUrl = "/api/grafana-auth";
let targetPath = "/d/lokppnd/logiservapp-monitoring-serveurs";
let params = "?orgId=1&kiosk=true";
 
// Configuration différente pour les administrateurs
if (session.user.email === adminEmail) {
  targetPath = "/admin/users";
  params = "?orgId=1";
}
 
const grafanaUrl = `${grafanaProxyBaseUrl}${targetPath}${params}`;

Deux modes d'accès

Mode utilisateur standard

• Tableau de bord dédié : Vue spécifique à votre parc de serveurs
• Mode kiosque : Interface épurée sans menu Grafana
• Données filtrées : Seuls vos serveurs sont visibles
• Lecture seule : Protection contre les modifications accidentelles

Mode administrateur

• Accès complet : Gestion des utilisateurs et paramètres
• Interface complète : Tous les menus Grafana disponibles
• Configuration avancée : Création de tableaux de bord personnalisés
• Gestion globale : Vue sur tous les parcs clients

Interface utilisateur optimisée

Intégration seamless

// Composant React pour l'intégration Grafana
export default function GrafanaPage() {
  const [isEmbedded, setIsEmbedded] = useState(false);
  const [loading, setLoading] = useState(false);
  const [grafanaUrlToEmbed, setGrafanaUrlToEmbed] = useState<string | null>(null);
 
  const handleEmbedGrafana = () => {
    if (!grafanaUrlToEmbed) return;
    setLoading(true);
    setTimeout(() => {
      setIsEmbedded(true);
      setLoading(false);
    }, 500);
  };

Interface responsive

L'interface s'adapte automatiquement à votre écran :

• Mode plein écran : Utilisation maximale de l'espace disponible
• Navigation simplifiée : Bouton retour pour revenir au tableau de bord
• Chargement progressif : Indicateur de progression pendant le chargement
• Gestion d'erreurs : Messages explicites en cas de problème

Tableaux de bord temps réel

Métriques système principales

Visualisez en temps réel :

Performance CPU

• Utilisation globale par serveur
• Répartition par cœur de processeur
• Tendances historiques sur différentes périodes
• Seuils d'alerte configurables

Mémoire et stockage

• RAM utilisée/disponible avec graphiques en temps réel
• Évolution des caches système
• Espace disque par partition
• Vitesse I/O des disques

Réseau et connectivité

• Trafic entrant/sortant par interface
• Latence réseau entre vos sites
• Erreurs de paquets et qualité de service
• Bande passante utilisée vs disponible

Graphiques interactifs

// Exemple de configuration de graphique Grafana
{
  "type": "timeseries",
  "title": "CPU Usage - ${server_name}",
  "targets": [
    {
      "expr": "system.cpu.util[,user]",
      "legendFormat": "User CPU",
      "refId": "A"
    },
    {
      "expr": "system.cpu.util[,system]", 
      "legendFormat": "System CPU",
      "refId": "B"
    }
  ],
  "fieldConfig": {
    "defaults": {
      "unit": "percent",
      "min": 0,
      "max": 100
    }
  }
}

Fonctionnalités avancées

Zoom et navigation temporelle

• Zoom interactif : Cliquez-glissez pour zoomer sur une période
• Navigation rapide : Boutons prédéfinis (1h, 6h, 24h, 7j, 30j)
• Actualisation automatique : Données mises à jour toutes les 30 secondes
• Pause/reprise : Contrôle de l'actualisation automatique

Filtrage dynamique

-- Exemples de requêtes Zabbix dynamiques
-- Filtrage par parc client
SELECT * FROM items 
WHERE hostid IN (
  SELECT hostid FROM hosts 
  WHERE host LIKE '${parc_name}%'
);
 
-- Métriques avec seuils personnalisés
SELECT value FROM history 
WHERE itemid = ${cpu_itemid} 
AND clock > ${start_time}
ORDER BY clock DESC;

Annotations et événements

• Événements système : Redémarrages, mises à jour
• Alertes déclenchées : Marqueurs visuels sur les graphiques
• Maintenance planifiée : Périodes d'interruption programmées
• Annotations personnalisées : Notes et commentaires

Gestion des performances

Optimisation du chargement

Le système optimise automatiquement :

Cache intelligent

// Configuration du cache Grafana
const cacheConfig = {
  dataSourceCache: {
    enabled: true,
    ttl: 30, // 30 secondes
    maxSize: 100 // 100 MB
  },
  queryCache: {
    enabled: true,
    ttl: 60, // 1 minute pour les requêtes complexes
  }
};

Requêtes optimisées

• Agrégation intelligente : Réduction des points de données pour les longues périodes
• Requêtes parallèles : Chargement simultané des différents panneaux
• Lazy loading : Chargement à la demande des données non visibles
• Compression des données : Réduction de la bande passante

Responsive design

/* Adaptation mobile automatique */
@media (max-width: 768px) {
  .grafana-panel {
    height: 300px;
    margin-bottom: 10px;
  }
  
  .dashboard-row {
    flex-direction: column;
  }
}

Alertes visuelles intégrées

Indicateurs temps réel

Sur vos graphiques, visualisez instantanément :

• Seuils configurés : Lignes colorées pour les limites d'alerte
• États actuels : Couleurs de fond selon la criticité
• Tendances : Flèches indiquant l'évolution
• Prédictions : Projections basées sur l'historique

Corrélation d'événements

// Exemple de corrélation automatique
function correlateEvents(cpuData, memoryData, diskData) {
  const highCPU = cpuData.filter(point => point.value > 80);
  const lowMemory = memoryData.filter(point => point.value > 90);
  
  // Détection de corrélations temporelles
  return findTimeCorrelations(highCPU, lowMemory, 300); // 5 minutes
}

Tableaux de bord personnalisables

Vues par rôle

Selon votre profil, accédez à :

Vue opérationnelle

• Surveillance globale : État de tous vos serveurs
• Alertes actives : Problèmes nécessitant une attention
• Disponibilité : Taux de service par application
• Performance réseau : Latences entre sites

Vue technique

• Métriques détaillées : Données techniques approfondies
• Logs système : Événements et erreurs
• Diagnostics : Outils d'analyse de performance
• Prédictions : Tendances et projections

Vue management

• KPI business : Indicateurs de performance métier
• Rapports consolidés : Synthèses par période
• Analyse de coûts : Optimisation des ressources
• Conformité : Respect des SLA

API et intégrations

Accès programmatique

// API pour récupérer des données Grafana
export async function getGrafanaData(
  dashboard: string, 
  timeRange: string,
  variables: Record<string, string>
) {
  const response = await fetch('/api/grafana-proxy/render', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      dashboard,
      timeRange,
      variables,
      format: 'json'
    })
  });
  
  return response.json();
}

Webhooks et notifications

• Alertes webhook : Intégration avec vos systèmes externes
• Export automatique : Génération de rapports programmée
• API REST : Accès aux données pour vos applications
• SSO intégration : Connexion avec vos systèmes d'identité

Sécurité et contrôle d'accès

Isolation des données

// Filtrage automatique par parc client
const userDataFilter = {
  parc: user.parc,
  permissions: user.permissions,
  dataRetention: user.plan.dataRetention
};
 
// Application du filtre à toutes les requêtes
function applyUserFilter(query: string, filter: UserDataFilter) {
  return query.replace('${parc}', filter.parc);
}

Audit et traçabilité

• Logs d'accès : Qui accède à quoi et quand
• Modifications tracées : Historique des changements
• Sessions sécurisées : Timeout automatique
• Conformité RGPD : Respect de la protection des données

Mobile et responsive

Application mobile optimisée

// Détection du type d'appareil
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 
if (isMobile) {
  // Interface simplifiée pour mobile
  setGrafanaParams('?kiosk=true&mobile=true');
}

Fonctionnalités mobiles

• Graphiques tactiles : Zoom et navigation au doigt
• Notifications push : Alertes directes sur smartphone
• Mode hors ligne : Cache des données essentielles
• Partage facile : Export et envoi de captures d'écran

Conclusion

Le système de monitoring temps réel de Logiserv avec Grafana vous offre une visibilité complète et immédiate sur vos infrastructures. L'intégration native, l'authentification transparente et les tableaux de bord optimisés vous permettent de surveiller efficacement vos systèmes sans complexité technique.

Pour accéder à vos données en temps réel, rendez-vous dans la section Monitoring temps réel de votre tableau de bord.

Questions sur l'utilisation de Grafana ? Consultez notre documentation ou contactez notre équipe de support.