跳到主要內容

認識 Grafana

前言

Grafana是一個跨平台、開源的資料視覺化網路應用平台。在使用者設定連接的資料來源之後，Grafana可以在網路瀏覽器裡顯示資料圖表和警告。

測試資料


​



下載 Grafana

官方下載連結: https://grafana.com/grafana/download

danny@Danny-Yu Dev % curl -O https://dl.grafana.com/grafana-enterprise/release/12.3.3/grafana-enterprise_12.3.3_21957728731_darwin_arm64.tar.gz

tar -zxvf grafana-enterprise_12.3.3_21957728731_darwin_arm64.tar.gz

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                 Dload  Upload   Total   Spent    Left  Speed

100  274M  100  274M    0     0  5216k      0  0:00:53  0:00:53 --:--:-- 7237k



啟動 Grafana 服務

請進入目錄並執行以下命令：

danny@Danny-Yu grafana-12.3.3 % ./bin/grafana server

INFO [02-13|11:11:51] Starting Grafana                         logger=settings version=12.3.3 commit=2a14494b2d6ab60f860d8b27603d0ccb264336f6 branch=release-12.3.3 compiled=2026-02-13T11:11:51+08:00



初始設定步驟簡要：

  1. 啟動 Grafana 後，預設登入網址為 http://localhost:3000
  2. 使用帳號 admin / admin 登入並更改密碼 123456



新增 Data Source

進入「Configuration」新增資料來源，選擇要連接的資料庫類型（如 Prometheus、postgreSQL）

Home > Connections > Data sources > Add data source



輸入相關設定資料，測試連線

Name: 之後在 panel 選取 data source 時顯示的名稱

Host: IP:port (例 localhost:3306)

Database: 填入資料來源的資料庫名稱

User/Password: 資料庫帳號/密碼





建立Dashboard

測試連線成功後即可開始建立儀表板

Home > Dashboards


    點選 「Save dashboard」

    輸入相關設定資料，點選 「Save」



    點選「Dashboards」




















    點選「資料來源」 ，這裡我們選 [postgres dashboard]



    點選「Add visualization」

    選擇資料來源


    資料來源(data source)，我這部分使用PostgreSQL資料庫，SQL搜尋的語法也是寫在這裡




    右邊 Visualizations，選擇 panel 類型(time series, bar chart, gauge, table等等)，以及 panel 的設定(title, style, mapping)都在這邊更改



    


    






















    儲存設定


此僅簡單介紹測試，更詳細請參看 https://grafana.com/docs/grafana-cloud/monitor-applications/frontend-observability/


留言

張貼留言

這個網誌中的熱門文章

初探 Vue 呼叫 API 出現 CORS 跨來源資源共享 問題原因

提要:   在 {初探Vue 與 Spring boot 的對話} 專案 ，前端 Vue 應用程式 串接 後端 API 伺服器 ，axios 呼叫 API 時出現以下，”無法取得回應內容 (No 'Access-Control-Allow-Origin' header is present on the requested resource)：” 錯誤訊息，根據查找相關資料 ，出現以下原因。 瀏覽器開發工具 錯誤訊息 畫面 錯誤原因: “ Access to XMLHttpRequest at ” from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource” 瀏覽器為了安全考量，實施了同源政策。 當您的前端應用程式 (http://localhost:8080) 嘗試呼叫一個不同來源 (不同協議、不同域名或不同埠號) 的 API 伺服器 (http://localhost:8088) 時，瀏覽器會主動阻止這個請求，除非伺服器明確地允許這個跨來源的存取。 同源政策限制(Same-Origin Policy): 同源政策限制了程式碼和不同網域資源間的互動，同源是指兩份網頁具備相同協定、埠號（如果有指定）以及主機位置 範例: 表列哪些 URL 與 URL http://www.example.com/api/p1 屬於同源： URL                                                   | 結果   | 原因 --------------------------------------------------------------------- http://www.example.com/api/p2     |...
張貼留言
閱讀完整內容

初探 Vue 與 Spring boot 的對話之Frontend (Vue-Frontend)

  Front-end Vue 使用 REST API 建立 Vite 專案 可參考 { Vue 3 初探}  文章 danny@Danny-Yu projects % npm create vite@latest Need to install the following packages: create-vite@8.2.0 Ok to proceed? (y) y > npx > "create-vite" │ ◇   Project name: │   vue-frontend │ ◇   Select a framework: │   Vue │ ◇   Select a variant: │   TypeScript │ ◇   Use rolldown-vite (Experimental)?: │   No │ ◇   Install with npm and start now? │   Yes │ ◇   Scaffolding project in /Users/danny/Desktop/projects/vue-frontend... │ ◇   Installing dependencies with npm... added 47 packages, and audited 48 packages in 27s 6 packages are looking for funding   run `npm fund` for details found 0 vulnerabilities │ ◇   Starting dev server... > vue-frontend@0.0.0 dev > vite   VITE v7.2.4   ready in 411 ms   ➜   Local:   http://localhost:5173/   ➜   Network: use --host to expose   ➜   press h + enter to show...
張貼留言
閱讀完整內容

初探 Spring 中的循環依賴

原因: 當兩個或多個 bean 直接或間接地相互依賴時, 就會出現 Circular Dependency (循環依賴) 如: Bean A -> Bean B -> Bean A import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanA {          @Autowired     private BeanB beanB;     public String sayHi() {         return "Hi! 我是 Class A.";     } } import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanB {          @Autowired     private BeanA beanA;     public String sayHi() {         return "Hi! 我是 Class B.";     } } 編譯時不會出現問題 danny@Danny-Yu demo % mvn clean install -Dmaven.test.skip=true                           ... ... [INFO] Installing /Users/danny/Desktop/projects/demo/target/dem...
張貼留言
閱讀完整內容