Skip to content

NimTechnology

Trình bày các công nghệ CLOUD một cách dễ hiểu.

  • Kubernetes & Container
    • Docker
    • Kubernetes
      • Ingress
      • Pod
    • Helm Chart
    • OAuth2 Proxy
    • Isito-EnvoyFilter
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Vault
    • Longhorn – Storage
    • VictoriaMetrics
    • MetalLB
    • Kong Gateway
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Argo Events
    • Spinnaker
    • Jenkins
    • Harbor
    • TeamCity
    • Git
      • Bitbucket
  • Coding
    • DevSecOps
    • Terraform
      • GCP – Google Cloud
      • AWS – Amazon Web Service
      • Azure Cloud
    • Golang
    • Laravel
    • Python
    • Jquery & JavaScript
    • Selenium
  • Log, Monitor & Tracing
    • DataDog
    • Prometheus
    • Grafana
    • ELK
      • Kibana
      • Logstash
  • BareMetal
    • NextCloud
  • Toggle search form

[Grafana] Hướng dẫn nhúng (Embedding) Grafana Dashboard vào Iframe HTML / web của bạn

Posted on July 13, 2021December 29, 2024 By nim No Comments on [Grafana] Hướng dẫn nhúng (Embedding) Grafana Dashboard vào Iframe HTML / web của bạn

bài viết ở trên khá cũ rồi.

giờ mính sẽ hướng dẫn các bạn chi tiếp

trong grafana các bạn cần chỉnh sửa 1 số phần như sau:
/etc/grafana/grafana.ini

[security]
allow_embedding = true
cookie_samesite = none
cookie_secure = true

allow_embedding = true -> This setting allows Grafana dashboards or panels to be embedded in other web pages via an <iframe>
cookie_samesite = none -> Determines the SameSite attribute of cookies set by Grafana. This controls how cookies are sent with cross-origin requests
cookie_secure = true -> Ensures that cookies are only sent over secure connections (HTTPS).

tiếp đến bạn vào trong html là thêm đoạn kiểu như sau:

<div class="accordion-body text-sm opacity-8">
  <iframe
      src="https://timestone.nim.com/d/Ahihihehe/pods-metrics-server-monitor-prometheus?orgId=1&from=now-30&timezone=browser&var-cluster=dev-engines&var-namespace=$__all&var-kind=$__all&var-owner=$__all&var-container=$__all&var-pod=$__all&var-pool=$__all&theme=light"
      frameborder="0"
      scrolling="yes"
      seamless="seamless"
      style="display: block; width: 100%; height:100vh; margin: 10px auto; border: 1px solid #ccc; box-sizing: border-box;"
    ></iframe>
</div>

Nếu bạn thấy giao diện này còn quá nhiều thứ thừa thì thêm &kiosk

Coding

Post navigation

Previous Post: [Nextcloud] Hướng dẫn tăng dung lượng upload file trong Docker nextcloud – upload_max_filesize
Next Post: Ví dụ về laravel http client response code

More Related Articles

Đo kích thước browser của bạn là bao nhiêu! Coding
[nodeJs] Resovle the issue: npm ERR! cb() never called! Coding
[SQL] what are DDL, DML, DCL in SQL? Coding
[WordPress] How to add a Dynamic watermark on WordPress. Coding
[Grafana] Easily install Grafana on Kubernetes using a Helm chart. Coding
[VScode] Details: libsecret-1.so.0: cannot open shared object file: No such file or director Coding

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tham Gia Group DevOps nhé!
Để Nim có nhiều động lực ra nhiều bài viết.
Để nhận được những thông báo mới nhất.

Recent Posts

  • [WordPress] Hướng dấn gửi mail trên WordPress thông qua gmail. June 15, 2025
  • [Bitbucket] Git Clone/Pull/Push with Bitbucket through API Token. June 12, 2025
  • [Teamcity] How to transfer the value from pipeline A to pipeline B June 9, 2025
  • [Windows] Remove the process that consumes too much CPU. June 3, 2025
  • Deploying Web-Based File Managers: File Browser and KubeFileBrowser with Docker and Kubernetes June 3, 2025

Archives

  • June 2025
  • May 2025
  • April 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023
  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Categories

  • BareMetal
    • NextCloud
  • CI/CD
    • Argo Events
    • ArgoCD
    • ArgoWorkflows
    • Git
      • Bitbucket
    • Harbor
    • Jenkins
    • Spinnaker
    • TeamCity
  • Coding
    • DevSecOps
    • Golang
    • Jquery & JavaScript
    • Laravel
    • NextJS 14 & ReactJS & Type Script
    • Python
    • Selenium
    • Terraform
      • AWS – Amazon Web Service
      • Azure Cloud
      • GCP – Google Cloud
  • Kubernetes & Container
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Docker
    • Helm Chart
    • Isito-EnvoyFilter
    • Kong Gateway
    • Kubernetes
      • Ingress
      • Pod
    • Longhorn – Storage
    • MetalLB
    • OAuth2 Proxy
    • Vault
    • VictoriaMetrics
  • Log, Monitor & Tracing
    • DataDog
    • ELK
      • Kibana
      • Logstash
    • Fluent
    • Grafana
    • Prometheus
  • Uncategorized
  • Admin

Copyright © 2025 NimTechnology.