找回密码
 注册
查看: 55|回复: 0

智能错误检测 + 提示版本(原生 HTML + JS + ECharts)

[复制链接]

1

主题

0

回帖

12

积分

管理员

积分
12
QQ
发表于 2025-11-9 21:17:28 | 显示全部楼层 |阅读模式
智能错误检测 + 提示版本(原生 HTML + JS + ECharts),这样:
6 {+ I% D6 t. z  D& E5 ?. n' W
如果数据为空或 metricId 未定义,会显示 “暂无监控数据”;

# E. q4 j1 q& n0 d+ m# V- a* B
如果 Gnocchi API 401(Token 过期),会提示 “Token 无效”;
: L# e# g# T1 v
如果取到数据,则正常绘图。
: E% x" m* @5 t; }
✅ 完整示例(直接可替换你的前端代码)

" x6 J& M! d% G5 R1 k1 {! m+ o+ Q; g
假设你模板变量是 metrics 和 token:
% j6 S% S% {* d
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>资源监控</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <style>
    .chart-box {
      width: 48%;
      height: 300px;
      display: inline-block;
      margin: 10px;
      border: 1px solid #eee;
      position: relative;
    }
    .chart-error {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #888;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h2>资源监控</h2>
& l, l; t) c  E$ B5 H9 U' B$ w/ u; s
  <div id="cpu" class="chart-box"></div>
  <div id="memory" class="chart-box"></div>
  <div id="disk" class="chart-box"></div>
  <div id="network" class="chart-box"></div>
* P( e, y7 `" Y7 [: m' P
  <script>
    const metrics = {
      cpu: "{{ metrics.cpu }}",
      memory: "{{ metrics.memory.usage }}",
      disk: "{{ metrics.disk.root.size }}",
      network: "{{ metrics.compute.instance.booting.time }}"
    };
4 l5 k  P2 [  V% H- |2 G
    const token = "{{ token }}"; // 后端传入 Keystone Token

0 |  T- Q4 z$ X0 d
    const charts = {
      cpu: echarts.init(document.getElementById('cpu')),
      memory: echarts.init(document.getElementById('memory')),
      disk: echarts.init(document.getElementById('disk')),
      network: echarts.init(document.getElementById('network'))
    };

! \, R! y. d3 }
    const titles = {
      cpu: "CPU 使用率",
      memory: "内存使用率",
      disk: "磁盘 I/O",
      network: "网络活动"
    };
" g4 F! w6 B6 z! O5 G
    const colors = {
      cpu: "#e74c3c",
      memory: "#3498db",
      disk: "#2ecc71",
      network: "#9b59b6"
    };
1 j! f, t. d3 p$ y) E4 K5 {, ?
    async function loadMetric(chart, metricId, title, color) {
      // 没有 metricId,直接提示
      if (!metricId || metricId === 'None' || metricId === 'undefined') {
        chart.clear();
        chart.getDom().innerHTML = `<div class="chart-error">⚠️ 暂无监控数据</div>`;
        return;
      }

6 J, y. |, y- g6 Z1 g
      try {
        const res = await fetch(`http://controller:8041/v1/metric/${metricId}/measures`, {
          headers: { "X-Auth-Token": token }
        });

' K  r1 H) C3 `) B" k% d
        if (res.status === 401) {
          chart.getDom().innerHTML = `<div class="chart-error">
您需要登录后才可以回帖 登录 | 注册

本版积分规则

返回首页|Archiver|手机版|小黑屋|易陆发现技术论坛 ( 蜀ICP备2026014127号-1 )

GMT+8, 2026-6-11 23:05 , Processed in 0.018194 second(s), 22 queries .

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表