Dashboard đẹp với dev, nhưng CEO/CFO nhìn vào dashboard mặc định của Kibana thường thấy rối: nhiều panel grid vuông, chữ nhỏ, không có logo công ty. Canvas giải quyết đúng vấn đề này — cho phép dựng workpad layout tự do, pixel-precise, có brand, font, màu riêng, render live từ Elasticsearch. Kết quả: “infographic chạy thật” mà stakeholder đọc được như slide PDF, không cần bạn giải thích “đọc dashboard thế nào”.
Đây là bài thứ 5 trong series Kibana từ A đến Z. Sau bài này bạn sẽ:
- Hiểu khi nào dùng Canvas, khi nào Dashboard — và khi nào cả hai
- Dựng workpad với background, logo, font công ty
- Viết expression pipeline cho metric động
- Query ES bằng ESSQL trong Canvas
- Làm image/color dynamic theo value (đèn xanh-vàng-đỏ theo SLO)
- Export PDF multi-page để giao stakeholder không cần login Kibana
Phần 1: Canvas vs Dashboard — khi nào dùng cái nào
Hai công cụ cùng show số từ ES, nhưng mục tiêu khác nhau:
| Dashboard | Canvas | |
|---|---|---|
| Layout | Grid panel co giãn | Free-form, pixel-precise |
| Mục tiêu | Exploratory — team drill down | Presentation — stakeholder đọc lướt |
| Branding | Hạn chế, style global | Tuỳ biến tối đa: font, color, image, BG |
| Interactivity | Filter cross-panel, drill-down | Minimal, chủ yếu xem |
| Data source | Data view + Lens/Vis | ES docs, ESSQL, Timelion |
| Use case điển hình | Oncall, dev daily debug | Board report, client report, lobby TV |
| Export | PNG/PDF từng panel | PDF multi-page, PNG fullpage |
Quy tắc tay:
- Làm cho dev/oncall → Dashboard (nhanh, linh hoạt).
- Làm cho sếp/khách hàng/lobby TV → Canvas (đẹp, brand, presentation).
- Cả hai cùng tồn tại là bình thường: 1 dashboard oncall + 1 canvas report tuần cho sếp, chung data.
Phần 2: Workpad cơ bản
Tạo workpad
- ≡ → Analytics → Canvas → Create workpad.
- Đặt name, ví dụ “Weekly Ops Report”.
- Workpad settings (icon bánh răng):
- Background color (#0a0a0a cho dark, #ffffff cho light presentation).
- Dimension: 1920x1080 cho full HD, hoặc 1280x720 cho presentation thường.
- Grid: bật trong lúc dựng, tắt khi export.
Add element
Right click workpad → Add element (hoặc button trên cùng). 6 nhóm element:
| Nhóm | Element |
|---|---|
| Chart | Area, Bubble, Debug, Donut, Horizontal bar, Line, Metric, Pie, Plot, Shape |
| Image | Image, Image reveal |
| Text | Markdown, Text |
| Table | Data table |
| Progress | Gauge, Horizontal bar (progress), Vertical bar (progress) |
| Filter | Dropdown filter, Time filter |
Drag corner để resize. Drag element để di chuyển. Giữ Shift để constrain aspect ratio.
Bắt đầu với layout “Executive summary”
Template phổ biến cho weekly report:
+------------------------+------------------------+
| [Logo] Weekly | Period: Apr 7-13 |
| Ops Report | Generated: Apr 14 |
+------------------------+------------------------+
| Uptime Incidents Err rate MTTR |
| 99.94% 3 0.08% 14m |
+-------------------------------------------------+
| [Line chart: Error rate over week] |
| |
+-------------------------+-----------------------+
| [Top 5 endpoints] | [Top 5 errors] |
+-------------------------+-----------------------+
| [Markdown: Key takeaways written by team lead] |
+-------------------------------------------------+4 metric lớn ở đầu, 1 chart time-series, 2 table top-N, 1 markdown note cuối.
Background và brand
- Click workpad trống → Background color hoặc Background image (upload logo-pattern, upload corporate watermark).
- Thêm Image element cho logo công ty ở góc trên trái.
- Text element với font của brand (nếu font đặc biệt, upload TTF qua global CSS).
Phần 3: Expression language — “pipe mọi thứ”
Cốt lõi Canvas là expression language: một pipeline functions giống shell pipe, nhận input → output. Mỗi element có 1 expression đằng sau.
Click element → tab Expression editor (icon </> bên phải):
filters
| essql query="SELECT COUNT(*) AS errors FROM \"app-logs-*\" WHERE Level = 'Error'"
| math "errors"
| metric "Errors"
metricFont={font family="Arial" size=72 align="center" color="#ef4444"}
labelFont={font family="Arial" size=18 align="center" color="#737373"}Đọc pipeline từ trên xuống:
filters— apply filter bar của workpad (time, dropdown).essql query="..."— chạy SQL trên ES, trả bảng.math "errors"— lấy cell “errors” từ bảng, biến thành scalar.metric— render kiểu metric card với label + value, font tuỳ biến.
Functions hay dùng
| Function | Vai trò |
|---|---|
filters | Apply filter của workpad |
essql query="..." | Query SQL trên ES |
esdocs index="..." | Lấy docs raw |
timelion query="..." | Lấy time series (legacy) |
math "expr" | Tính toán trên bảng |
mapColumn name column fn | Thêm column mới |
filterrows fn | Filter row |
sort by | Sort |
head count=N / tail count=N | Top/bottom N |
metric, table, progress, shape, markdown | Render |
render | Wrapper render cuối |
Ví dụ: metric động “error rate” có màu theo threshold
filters
| essql query="
SELECT
(SUM(CASE WHEN Level IN ('Error','Fatal') THEN 1 ELSE 0 END) * 100.0) / COUNT(*) AS rate
FROM \"app-logs-*\"
"
| math "rate"
| metric "Error rate %"
metricFont={
font family="Arial"
size=64
align="center"
color={
if {getCell "rate" | gte 5} then="#ef4444"
else={
if {getCell "rate" | gte 1} then="#f59e0b"
else="#22c55e"
}
}
}Đèn xanh khi rate < 1%, vàng 1-5%, đỏ ≥5% — thay đổi theo data, không hardcode.
Subexpression {...}
Trong Canvas expression, {...} là subexpression chạy độc lập và trả scalar. Dùng rất nhiều cho logic conditional: color, size, label động theo data.
Phần 4: Data source — ba cách lấy data
essql — SQL trên ES
Cách recommended. ES SQL syntax gần giống SQL chuẩn, dùng backslash escape double-quote cho index name:
essql query="
SELECT
service,
COUNT(*) AS errors,
AVG(response_time_ms) AS avg_rt
FROM \"app-logs-*\"
WHERE Level IN ('Error','Fatal')
GROUP BY service
ORDER BY errors DESC
LIMIT 10
"Escape double quotes: \". Param count=1000 để tăng row limit.
esdocs — raw docs
Khi cần doc fields thô:
esdocs index="app-logs-*" query="Level:Error" sort="@timestamp, desc" count=100timelion — legacy
Vẫn hỗ trợ nhưng ngôn ngữ riêng. Không recommend cho project mới — dùng essql + math.
Mix với mapColumn và math
Sau khi có bảng từ essql, xử lý tiếp:
essql query="SELECT service, success, failure FROM app_metrics"
| mapColumn name="rate" fn={getCell "failure" | divide {getCell "success" | plus {getCell "failure"}}}
| mapColumn name="rate_pct" fn={getCell "rate" | multiply 100}
| tablePhần 5: Dynamic element — image và progress
Image reveal — gauge ảnh
Element Image reveal cho phép “điền ảnh” theo percentage. Use case: icon pin điện thoại đầy/vơi theo uptime.
filters
| essql query="SELECT uptime FROM sla_metrics"
| math "uptime / 100"
| revealImage
image="asset://path/to/battery-full.svg"
emptyImage="asset://path/to/battery-empty.svg"
origin="bottom"Progress bar cho SLO
Element Progress có sẵn nhiều hình dạng (gauge, semicircle, vertical bar).
filters
| essql query="SELECT 99.94 AS uptime"
| math "uptime / 100"
| progress shape="semicircle"
max=1
valueColor="#22c55e"
labelPosition="left"Shape dynamic color
filters
| essql query="SELECT error_count FROM recent"
| math "error_count"
| shape shape="circle"
fill={
if {getCell "error_count" | gte 10} then="#ef4444"
else="#22c55e"
}
border="#000"
borderWidth=2Phần 6: Filter cross-element
Canvas có filter scope toàn workpad. Add element Dropdown filter hoặc Time filter → toàn bộ element khác tự apply khi expression của chúng có filters đứng đầu.
- Dropdown filter đa dụng: chọn 1 service, toàn workpad hiển thị data của service đó.
- Time filter cho workpad dạng “sliding window”: weekly, daily, hourly.
Pitfall thường gặp: element không respond filter → kiểm tra expression có filters đứng đầu pipeline chưa. Thiếu = expression không biết filter tồn tại.
Phần 7: Export — giao stakeholder không cần Kibana login
PDF / PNG từ GUI
- Từ workpad, góc phải trên → Share → PDF reports / PNG reports.
- Chọn page range.
- Click Generate → Kibana tạo background job.
- Tab Management → Stack Management → Reporting để xem status.
- Download khi done.
Scheduled report — gửi tự động
≡ → Management → Stack Management → Reporting cho phép schedule:
- Weekly PDF Monday 8am → email đến stakeholder list.
- Cần bật email connector trong Stack Management → Connectors.
Embed vào website
Canvas workpad có thể embed iframe:
- Share → Share on a website → copy iframe URL.
- Cần Kibana cho phép anonymous access hoặc user login.
- Thường dùng cho lobby TV dashboard.
Phần 8: Pitfall
1. essql fail với field có dấu @ hoặc .
Trong ES SQL, @timestamp phải bọc double quote: "@timestamp". Field nested Properties.ApplicationName cũng vậy:
SELECT "@timestamp", "Properties.ApplicationName" FROM "app-logs-*"2. Expression editor không gợi ý — dùng tab khác
Khi expression phức tạp, dùng editor ngoài (VS Code) để viết, copy vào sau. Editor của Canvas không có lint mạnh.
3. Canvas chậm với nhiều element query liên tục
Mỗi element chạy expression riêng, mỗi lần filter đổi là query lại toàn bộ. Workpad 20+ element → nặng cluster. Giảm số element, hoặc dùng ESSQL cache-friendly (time range có aggregation phụ hợp).
4. Font brand không hiện
Canvas dùng font cài sẵn trong Kibana. Muốn dùng font riêng:
- Upload file TTF/OTF vào
kibana-plugin-custom-assets(hoặc dùng Space custom CSS inject@font-face). - Restart Kibana.
- Reference font name trong expression.
5. Export PDF cắt lệch
Dimension workpad phải chia hết cho page PDF. Chọn 1280x720 (16:9) hoặc 1024x768 (4:3). Tránh dimension odd để PDF không crop.
Cheatsheet
| Việc | Expression / GUI |
|---|---|
| Query SQL | essql query="SELECT ..." |
| Lấy raw docs | esdocs index="..." query="..." |
| Scalar từ bảng | math "<column>" |
| Subexpression | {...} |
| Conditional color | if {getCell "x" | gte N} then=... else=... |
| Apply workpad filter | filters ở đầu pipeline |
| Image gauge | revealImage với origin + emptyImage |
| Progress | progress shape="semicircle" |
| Dynamic shape color | shape fill={...} |
| Escape field | "@timestamp", "Properties.X" |
| PDF export | Share → PDF reports |
| Schedule report | Stack Management → Reporting |
| Embed | Share → Share on a website |
Lời kết
Canvas là chỗ Kibana bắt mũi dev với stakeholder. Dev quen số liệu thô, sếp quen báo cáo “đẹp có brand” — Canvas giúp render cùng dữ liệu ES ra 2 dạng đồng thời. Viết xong 1 workpad Weekly Report tốt là đỡ được hàng giờ PowerPoint mỗi tuần, và dữ liệu luôn đúng đến giây vì render live.
Bài tiếp theo trong series Kibana từ A đến Z sẽ đi sang Maps — geo visualization cho IoT và telemetry: heatmap, choropleth, animation theo thời gian, dùng ES geo_point với index khổng lồ. Ba bài Part 2 sau đó sẽ khép lại nhóm Visualization trước khi bước sang Part 3 về Alerts. Nếu có use case Canvas cụ thể bạn muốn mình làm template — “weekly ops PDF cho SRE”, “SLA report cho khách hàng B2B”, “lobby TV dashboard cho NOC” — cứ drop comment hoặc email.