Gestión de Servidor con Grafana con HTML5 y CSS
Aquí te presento una plantilla básica de HTML5 y CSS para dispositivos móviles que se puede utilizar como punto de partida para una página web de gestión de servidor con Grafana:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Servidor con Grafana</title>
<style>
/* Estilos para dispositivos móviles */
@media (max-width: 767px) {
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
.container {
width: 100%;
padding: 0 20px;
}
.grafana-section {
width: 100%;
height: 500px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Gestión de Servidor con Grafana</h1>
<div class="grafana-section">
<!-- Aquí se puede incluir el iframe de Grafana -->
</div>
</div>
</body>
</html>
Este código establece una estructura básica para la página web y se encarga de optimizar los estilos para dispositivos móviles con un ancho máximo de 767 píxeles. Puedes modificar y ampliar esta plantilla según tus necesidades y requerimientos.
¿Cómo incluir el iframe de Grafana?
Para incluir un panel de Grafana en una página web, puedes utilizar un iframe HTML. El iframe permite incrustar una página web dentro de otra página web.
Aquí te muestro un ejemplo de cómo incluir un panel de Grafana en la plantilla HTML que te proporcioné más arriba:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Servidor con Grafana</title>
<style>
/* Estilos para dispositivos móviles */
@media (max-width: 767px) {
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
.container {
width: 100%;
padding: 0 20px;
}
.grafana-section {
width: 100%;
height: 500px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Gestión de Servidor con Grafana</h1>
<div class="grafana-section">
<!-- Aquí se incluye el iframe de Grafana -->
<iframe src="https://<GRAFANA_SERVER_URL>/d-solo/<DASHBOARD_UID>/<PANEL_UID>?orgId=<ORG_ID>" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
En este ejemplo, debes reemplazar los siguientes valores con los valores apropiados para tu instalación de Grafana:
GRAFANA_SERVER_URL: URL de tu servidor Grafana.DASHBOARD_UID: Identificador único (UID) del tablero de Grafana que deseas mostrar.PANEL_UID: Identificador único (UID) del panel de Grafana que deseas mostrar.ORG_ID: Identificador de la organización de Grafana que deseas utilizar.
Una vez que hayas reemplazado estos valores, el iframe incluirá el panel de Grafana en la página web.
