@yuku123/z-observer-component 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,15 @@
+import { A as s, H as r, L as t, M as g, T as p, a as c, b as i, l as m, m as o, c as A, r as P, t as l } from "./pages-manifest-NibPRBmP.js";
+export {
+  s as AlertPage,
+  r as HomePage,
+  t as LogSearchPage,
+  g as MetricPage,
+  p as TracePage,
+  c as alertApi,
+  i as appMeta,
+  m as logApi,
+  o as menuItems,
+  A as metricApi,
+  P as routes,
+  l as traceApi
+};

package/dist/pages-manifest-NibPRBmP.js

@@ -0,0 +1,883 @@
+import we, { useState as l, useEffect as X } from "react";
+import { SearchOutlined as Re, ReloadOutlined as Te, DashboardOutlined as _e, LineChartOutlined as Se, FileSearchOutlined as ke, FieldTimeOutlined as Ce, AlertOutlined as Ie } from "@ant-design/icons";
+import { Card as k, Space as P, Input as $, Select as de, Button as U, Alert as M, Table as ne, Tag as D, Typography as q, Empty as me, Tree as Oe, Row as xe, Col as L, Statistic as z, DatePicker as Ae } from "antd";
+import H from "dayjs";
+import Pe from "axios";
+import { Link as re } from "react-router-dom";
+var G = { exports: {} }, B = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var fe;
+function Ne() {
+  if (fe) return B;
+  fe = 1;
+  var t = Symbol.for("react.transitional.element"), g = Symbol.for("react.fragment");
+  function d(f, i, m) {
+    var p = null;
+    if (m !== void 0 && (p = "" + m), i.key !== void 0 && (p = "" + i.key), "key" in i) {
+      m = {};
+      for (var E in i)
+        E !== "key" && (m[E] = i[E]);
+    } else m = i;
+    return i = m.ref, {
+      $$typeof: t,
+      type: f,
+      key: p,
+      ref: i !== void 0 ? i : null,
+      props: m
+    };
+  }
+  return B.Fragment = g, B.jsx = d, B.jsxs = d, B;
+}
+var W = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var he;
+function Le() {
+  return he || (he = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(r) {
+      if (r == null) return null;
+      if (typeof r == "function")
+        return r.$$typeof === ve ? null : r.displayName || r.name || null;
+      if (typeof r == "string") return r;
+      switch (r) {
+        case w:
+          return "Fragment";
+        case c:
+          return "Profiler";
+        case a:
+          return "StrictMode";
+        case Y:
+          return "Suspense";
+        case V:
+          return "SuspenseList";
+        case ye:
+          return "Activity";
+        case je:
+          return "ViewTransition";
+      }
+      if (typeof r == "object")
+        switch (typeof r.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), r.$$typeof) {
+          case y:
+            return "Portal";
+          case n:
+            return r.displayName || "Context";
+          case u:
+            return (r._context.displayName || "Context") + ".Consumer";
+          case S:
+            var s = r.render;
+            return r = r.displayName, r || (r = s.displayName || s.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case O:
+            return s = r.displayName || null, s !== null ? s : t(r.type) || "Memo";
+          case K:
+            s = r._payload, r = r._init;
+            try {
+              return t(r(s));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function g(r) {
+      return "" + r;
+    }
+    function d(r) {
+      try {
+        g(r);
+        var s = !1;
+      } catch {
+        s = !0;
+      }
+      if (s) {
+        s = console;
+        var h = s.error, v = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return h.call(
+          s,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          v
+        ), g(r);
+      }
+    }
+    function f(r) {
+      if (r === w) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === K)
+        return "<...>";
+      try {
+        var s = t(r);
+        return s ? "<" + s + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function i() {
+      var r = Q.A;
+      return r === null ? null : r.getOwner();
+    }
+    function m() {
+      return Error("react-stack-top-frame");
+    }
+    function p(r) {
+      if (ae.call(r, "key")) {
+        var s = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (s && s.isReactWarning) return !1;
+      }
+      return r.key !== void 0;
+    }
+    function E(r, s) {
+      function h() {
+        oe || (oe = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          s
+        ));
+      }
+      h.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: h,
+        configurable: !0
+      });
+    }
+    function T() {
+      var r = t(this.type);
+      return le[r] || (le[r] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), r = this.props.ref, r !== void 0 ? r : null;
+    }
+    function _(r, s, h, v, N, A) {
+      var b = h.ref;
+      return r = {
+        $$typeof: C,
+        type: r,
+        key: s,
+        props: h,
+        _owner: v
+      }, (b !== void 0 ? b : null) !== null ? Object.defineProperty(r, "ref", {
+        enumerable: !1,
+        get: T
+      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(r, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(r, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(r, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
+    }
+    function x(r, s, h, v, N, A) {
+      var b = s.children;
+      if (b !== void 0)
+        if (v)
+          if (be(b)) {
+            for (v = 0; v < b.length; v++)
+              o(b[v]);
+            Object.freeze && Object.freeze(b);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else o(b);
+      if (ae.call(s, "key")) {
+        b = t(r);
+        var F = Object.keys(s).filter(function(Ee) {
+          return Ee !== "key";
+        });
+        v = 0 < F.length ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}", ue[b + v] || (F = 0 < F.length ? "{" + F.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          v,
+          b,
+          F,
+          b
+        ), ue[b + v] = !0);
+      }
+      if (b = null, h !== void 0 && (d(h), b = "" + h), p(s) && (d(s.key), b = "" + s.key), "key" in s) {
+        h = {};
+        for (var ee in s)
+          ee !== "key" && (h[ee] = s[ee]);
+      } else h = s;
+      return b && E(
+        h,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      ), _(
+        r,
+        b,
+        h,
+        i(),
+        N,
+        A
+      );
+    }
+    function o(r) {
+      j(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === K && (r._payload.status === "fulfilled" ? j(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    }
+    function j(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === C;
+    }
+    var R = we, C = Symbol.for("react.transitional.element"), y = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), c = Symbol.for("react.profiler"), u = Symbol.for("react.consumer"), n = Symbol.for("react.context"), S = Symbol.for("react.forward_ref"), Y = Symbol.for("react.suspense"), V = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), K = Symbol.for("react.lazy"), ye = Symbol.for("react.activity"), je = Symbol.for("react.view_transition"), ve = Symbol.for("react.client.reference"), Q = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ae = Object.prototype.hasOwnProperty, be = Array.isArray, Z = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    R = {
+      react_stack_bottom_frame: function(r) {
+        return r();
+      }
+    };
+    var oe, le = {}, ie = R.react_stack_bottom_frame.bind(
+      R,
+      m
+    )(), ce = Z(f(m)), ue = {};
+    W.Fragment = w, W.jsx = function(r, s, h) {
+      var v = 1e4 > Q.recentlyCreatedOwnerStacks++;
+      if (v) {
+        var N = Error.stackTraceLimit;
+        Error.stackTraceLimit = 10;
+        var A = Error("react-stack-top-frame");
+        Error.stackTraceLimit = N;
+      } else A = ie;
+      return x(
+        r,
+        s,
+        h,
+        !1,
+        A,
+        v ? Z(f(r)) : ce
+      );
+    }, W.jsxs = function(r, s, h) {
+      var v = 1e4 > Q.recentlyCreatedOwnerStacks++;
+      if (v) {
+        var N = Error.stackTraceLimit;
+        Error.stackTraceLimit = 10;
+        var A = Error("react-stack-top-frame");
+        Error.stackTraceLimit = N;
+      } else A = ie;
+      return x(
+        r,
+        s,
+        h,
+        !0,
+        A,
+        v ? Z(f(r)) : ce
+      );
+    };
+  })()), W;
+}
+var pe;
+function ze() {
+  return pe || (pe = 1, process.env.NODE_ENV === "production" ? G.exports = Ne() : G.exports = Le()), G.exports;
+}
+var e = ze();
+const I = Pe.create({ timeout: 15e3 });
+I.interceptors.response.use(
+  (t) => t.data,
+  (t) => {
+    var d, f;
+    const g = ((f = (d = t == null ? void 0 : t.response) == null ? void 0 : d.data) == null ? void 0 : f.error) || t.message || "请求失败";
+    return Promise.reject(new Error(g));
+  }
+);
+const te = {
+  /** 关键词用空格分隔是「且」关系；中文按 unigram+bigram 建索引，无需分词 */
+  search: (t) => I.get("/api/logs", { params: t }),
+  status: () => I.get("/api/logs/status")
+}, se = {
+  recent: (t = 20) => I.get("/api/traces", { params: { limit: t } }),
+  /** 后端对不存在的 traceId 返 404，不是空树 —— 「没采到」和「采到但是空」要分得开 */
+  tree: (t) => I.get(`/api/traces/${encodeURIComponent(t)}`)
+}, J = {
+  list: () => I.get("/api/alerts"),
+  addSilence: (t) => I.post("/api/silences", t),
+  addInhibit: (t) => I.post("/api/inhibits", t)
+}, Me = {
+  instant: (t, g) => I.get("/api/metrics/query", { params: { promql: t, time: g } }),
+  range: (t, g, d, f) => I.get("/api/metrics/query-range", { params: { promql: t, from: g, to: d, step: f } })
+}, $e = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"], De = {
+  ERROR: "red",
+  WARN: "orange",
+  INFO: "blue",
+  DEBUG: "default",
+  TRACE: "default"
+};
+function Ye() {
+  const [t, g] = l(""), [d, f] = l(void 0), [i, m] = l(""), [p, E] = l(15), [T, _] = l([]), [x, o] = l(null), [j, R] = l(!1), [C, y] = l(null);
+  async function w() {
+    R(!0), y(null);
+    try {
+      const a = Date.now(), c = a - p * 60 * 1e3, u = { limit: 200 };
+      t && (u.q = t), d && (u.level = d), i && (u.traceId = i), p > 0 && (u.from = c, u.to = a);
+      const [n, S] = await Promise.all([te.search(u), te.status()]);
+      _(Array.isArray(n) ? n : []), o(S);
+    } catch (a) {
+      y(a.message), _([]);
+    } finally {
+      R(!1);
+    }
+  }
+  return X(() => {
+    w();
+  }, []), /* @__PURE__ */ e.jsxs(
+    k,
+    {
+      title: "日志检索",
+      extra: /* @__PURE__ */ e.jsx(P, { children: /* @__PURE__ */ e.jsx(U, { icon: /* @__PURE__ */ e.jsx(Te, {}), onClick: w, loading: j, children: "刷新" }) }),
+      children: [
+        /* @__PURE__ */ e.jsxs(P, { wrap: !0, style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ e.jsx(
+            $,
+            {
+              style: { width: 280 },
+              placeholder: "关键词，空格分隔为且关系",
+              value: t,
+              onChange: (a) => g(a.target.value),
+              onPressEnter: w,
+              allowClear: !0
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            de,
+            {
+              style: { width: 120 },
+              placeholder: "级别",
+              allowClear: !0,
+              value: d,
+              onChange: f,
+              options: $e.map((a) => ({ label: a, value: a }))
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            $,
+            {
+              style: { width: 240 },
+              placeholder: "traceId（按链路聚类）",
+              value: i,
+              onChange: (a) => m(a.target.value),
+              onPressEnter: w,
+              allowClear: !0
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            de,
+            {
+              style: { width: 140 },
+              value: p,
+              onChange: E,
+              options: [5, 15, 60, 360, 1440].map((a) => ({
+                label: `最近 ${a} 分钟`,
+                value: a
+              }))
+            }
+          ),
+          /* @__PURE__ */ e.jsx(U, { type: "primary", icon: /* @__PURE__ */ e.jsx(Re, {}), onClick: w, loading: j, children: "查询" })
+        ] }),
+        C && /* @__PURE__ */ e.jsx(M, { type: "error", showIcon: !0, message: "查询失败", description: C, style: { marginBottom: 12 } }),
+        /* @__PURE__ */ e.jsx(
+          ne,
+          {
+            rowKey: (a, c) => `${a.timestampMillis}-${c}`,
+            size: "small",
+            loading: j,
+            dataSource: T,
+            pagination: { pageSize: 50, showSizeChanger: !0 },
+            columns: [
+              {
+                title: "时间",
+                dataIndex: "timestampMillis",
+                width: 170,
+                render: (a) => a ? H(a).format("YYYY-MM-DD HH:mm:ss.SSS") : "-"
+              },
+              {
+                title: "级别",
+                dataIndex: "level",
+                width: 90,
+                render: (a) => /* @__PURE__ */ e.jsx(D, { color: De[a], children: a })
+              },
+              { title: "线程", dataIndex: "thread", width: 120 },
+              { title: "logger", dataIndex: "logger", width: 220, ellipsis: !0 },
+              { title: "消息", dataIndex: "message", ellipsis: !0 },
+              {
+                title: "traceId",
+                dataIndex: "traceId",
+                width: 200,
+                ellipsis: !0,
+                render: (a) => a ? /* @__PURE__ */ e.jsx(q.Text, { copyable: { text: a }, children: a }) : "-"
+              }
+            ]
+          }
+        ),
+        x && /* @__PURE__ */ e.jsxs(q.Text, { type: "secondary", style: { display: "block", marginTop: 12 }, children: [
+          "在库 ",
+          x.liveLogs,
+          " 条，累计淘汰 ",
+          x.evictedLogs,
+          " 条"
+        ] })
+      ]
+    }
+  );
+}
+function Fe() {
+  const [t, g] = l([]), [d, f] = l(null), [i, m] = l(null), [p, E] = l(0), [T, _] = l(""), [x, o] = l(null), [j, R] = l(!1);
+  async function C() {
+    try {
+      const c = await se.recent(50);
+      g(c.traceIds || []);
+    } catch (c) {
+      o(c.message);
+    }
+  }
+  async function y(c) {
+    R(!0), o(null);
+    try {
+      const u = await se.tree(c);
+      m(u), E(u.orphanCount || 0), f(c);
+    } catch (u) {
+      m(null), o(u.message);
+    } finally {
+      R(!1);
+    }
+  }
+  X(() => {
+    C();
+  }, []);
+  function w(c) {
+    return (c || []).map((u) => ({
+      key: u.spanId,
+      title: /* @__PURE__ */ e.jsxs(P, { size: 6, wrap: !0, children: [
+        /* @__PURE__ */ e.jsx(D, { color: u.statusCode === "ERROR" ? "red" : "blue", children: u.name }),
+        /* @__PURE__ */ e.jsxs(q.Text, { type: "secondary", children: [
+          u.durationMillis,
+          " ms"
+        ] }),
+        u.attributes && Object.keys(u.attributes).length > 0 && /* @__PURE__ */ e.jsx(q.Text, { type: "secondary", style: { fontSize: 12 }, children: Object.entries(u.attributes).map(([n, S]) => `${n}=${S}`).join(" ") })
+      ] }),
+      children: w(u.children)
+    }));
+  }
+  const a = T ? t.filter((c) => c.includes(T)) : t;
+  return /* @__PURE__ */ e.jsxs(P, { align: "start", size: 16, style: { width: "100%" }, children: [
+    /* @__PURE__ */ e.jsxs(k, { title: "最近链路", style: { width: 320 }, children: [
+      /* @__PURE__ */ e.jsx(
+        $.Search,
+        {
+          placeholder: "按 traceId 过滤",
+          allowClear: !0,
+          value: T,
+          onChange: (c) => _(c.target.value),
+          style: { marginBottom: 12 }
+        }
+      ),
+      a.length === 0 ? /* @__PURE__ */ e.jsx(me, { description: "还没有链路数据" }) : /* @__PURE__ */ e.jsx("div", { style: { maxHeight: 560, overflow: "auto" }, children: a.map((c) => /* @__PURE__ */ e.jsx("div", { style: { marginBottom: 6 }, children: /* @__PURE__ */ e.jsx(
+        "a",
+        {
+          onClick: () => y(c),
+          style: {
+            fontWeight: d === c ? "bold" : "normal",
+            wordBreak: "break-all"
+          },
+          children: c
+        }
+      ) }, c)) })
+    ] }),
+    /* @__PURE__ */ e.jsxs(k, { title: "链路详情", style: { flex: 1 }, loading: j, children: [
+      x && /* @__PURE__ */ e.jsx(M, { type: "error", showIcon: !0, message: "取链路失败", description: x, style: { marginBottom: 12 } }),
+      !i && !x && /* @__PURE__ */ e.jsx(me, { description: "从左边选一条链路" }),
+      i && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        p > 0 && /* @__PURE__ */ e.jsx(
+          M,
+          {
+            type: "warning",
+            showIcon: !0,
+            style: { marginBottom: 12 },
+            message: `有 ${p} 个 span 的父 span 不在本条链路里（跨进程调用），已保留但单独标记`
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          Oe,
+          {
+            showLine: !0,
+            defaultExpandAll: !0,
+            treeData: w(i.roots)
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(q.Text, { type: "secondary", style: { display: "block", marginTop: 12 }, children: [
+          "traceId ",
+          i.traceId,
+          " · span ",
+          i.spanCount,
+          " 个"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const qe = { critical: "red", warning: "orange", info: "blue" }, Be = { FIRING: "red", PENDING: "orange", OK: "green", RESOLVED: "green" };
+function ge(t) {
+  return t ? t.valueOf() : void 0;
+}
+function We() {
+  var u;
+  const [t, g] = l(null), [d, f] = l(null), [i, m] = l(!1), [p, E] = l(""), [T, _] = l(null), [x, o] = l(""), [j, R] = l(""), [C, y] = l(null);
+  async function w() {
+    m(!0), f(null);
+    try {
+      g(await J.list());
+    } catch (n) {
+      f(n.message);
+    } finally {
+      m(!1);
+    }
+  }
+  X(() => {
+    w();
+  }, []);
+  async function a() {
+    if (y(null), !x) {
+      y("静默必须填原因 —— 事后要能回答「为什么这段时间没人收到告警」");
+      return;
+    }
+    const n = T || [H(), H().add(1, "hour")];
+    try {
+      await J.addSilence({
+        id: `s-${Date.now()}`,
+        matchers: p.split(/[\s,]+/).filter(Boolean),
+        startMillis: ge(n[0]),
+        endMillis: ge(n[1]),
+        reason: x,
+        createdBy: "console"
+      }), y("静默已生效"), E(""), o(""), _(null), w();
+    } catch (S) {
+      y(`加静默失败：${S.message}`);
+    }
+  }
+  async function c() {
+    y(null);
+    const n = j.split(/[\s,]+/).filter(Boolean);
+    if (n.length < 2) {
+      y("抑制规则填两个条件：source=... target=...（如 cluster_down target=api_high_error）");
+      return;
+    }
+    const S = n.find((O) => O.startsWith("source=")), Y = n.find((O) => O.startsWith("target=")), V = n.find((O) => O.startsWith("equal="));
+    if (!S || !Y) {
+      y("抑制规则必须有 source= 与 target=");
+      return;
+    }
+    try {
+      await J.addInhibit({
+        id: `i-${Date.now()}`,
+        sourceRuleId: S.slice(7),
+        targetRuleId: Y.slice(7),
+        equalLabel: V ? V.slice(6) : ""
+      }), y("抑制规则已生效"), w();
+    } catch (O) {
+      y(`加抑制失败：${O.message}`);
+    }
+  }
+  return /* @__PURE__ */ e.jsxs(P, { direction: "vertical", size: 16, style: { width: "100%" }, children: [
+    /* @__PURE__ */ e.jsxs(xe, { gutter: 16, children: [
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsx(z, { title: "活动告警", value: ((u = t == null ? void 0 : t.active) == null ? void 0 : u.length) ?? 0 }) }) }),
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsx(z, { title: "已发通知", value: (t == null ? void 0 : t.notificationsSent) ?? 0 }) }) }),
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsx(
+        z,
+        {
+          title: "通知失败",
+          value: (t == null ? void 0 : t.notificationsFailed) ?? 0,
+          valueStyle: ((t == null ? void 0 : t.notificationsFailed) ?? 0) > 0 ? { color: "#cf1322" } : void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsx(
+        z,
+        {
+          title: "评估失败",
+          value: (t == null ? void 0 : t.evaluateErrorCount) ?? 0,
+          valueStyle: ((t == null ? void 0 : t.evaluateErrorCount) ?? 0) > 0 ? { color: "#cf1322" } : void 0
+        }
+      ) }) })
+    ] }),
+    d && /* @__PURE__ */ e.jsx(M, { type: "error", showIcon: !0, message: "读告警失败", description: d }),
+    /* @__PURE__ */ e.jsx(k, { title: "活动告警", children: /* @__PURE__ */ e.jsx(
+      ne,
+      {
+        rowKey: (n, S) => `${n.ruleId}-${S}`,
+        size: "small",
+        loading: i,
+        dataSource: (t == null ? void 0 : t.active) ?? [],
+        pagination: !1,
+        locale: { emptyText: "当前没有活动告警" },
+        columns: [
+          { title: "规则", dataIndex: "ruleName" },
+          {
+            title: "级别",
+            dataIndex: "severity",
+            render: (n) => /* @__PURE__ */ e.jsx(D, { color: qe[n], children: n })
+          },
+          {
+            title: "状态",
+            dataIndex: "state",
+            render: (n) => /* @__PURE__ */ e.jsx(D, { color: Be[n], children: n })
+          },
+          {
+            title: "标签",
+            dataIndex: "labels",
+            render: (n) => Object.entries(n || {}).map(([S, Y]) => /* @__PURE__ */ e.jsxs(D, { children: [
+              S,
+              "=",
+              Y
+            ] }, S))
+          },
+          { title: "取值", dataIndex: "value", render: (n) => n ?? "-" },
+          {
+            title: "开始于",
+            dataIndex: "activeSinceMillis",
+            render: (n) => n ? H(n).format("MM-DD HH:mm:ss") : "-"
+          }
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(k, { title: "去噪操作", children: /* @__PURE__ */ e.jsxs(P, { direction: "vertical", style: { width: "100%" }, children: [
+      /* @__PURE__ */ e.jsx(Ue, {}),
+      /* @__PURE__ */ e.jsxs(P, { wrap: !0, children: [
+        /* @__PURE__ */ e.jsx(
+          $,
+          {
+            style: { width: 420 },
+            placeholder: "条件，空格分隔：app=z-gw 或 cluster=c1（留空=全员静默）",
+            value: p,
+            onChange: (n) => E(n.target.value)
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          Ae.RangePicker,
+          {
+            showTime: !0,
+            value: T,
+            onChange: _
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          $,
+          {
+            style: { width: 260 },
+            placeholder: "原因（必填）",
+            value: x,
+            onChange: (n) => o(n.target.value)
+          }
+        ),
+        /* @__PURE__ */ e.jsx(U, { type: "primary", onClick: a, children: "加静默" })
+      ] }),
+      /* @__PURE__ */ e.jsxs(P.Compact, { style: { width: "100%" }, children: [
+        /* @__PURE__ */ e.jsx(
+          $,
+          {
+            style: { width: 460 },
+            placeholder: "抑制规则：source=cluster_down target=api_high_error equal=cluster",
+            value: j,
+            onChange: (n) => R(n.target.value)
+          }
+        ),
+        /* @__PURE__ */ e.jsx(U, { onClick: c, children: "加抑制" })
+      ] }),
+      C && /* @__PURE__ */ e.jsx(M, { type: "info", message: C, showIcon: !0 })
+    ] }) })
+  ] });
+}
+function Ue() {
+  return /* @__PURE__ */ e.jsx(
+    M,
+    {
+      type: "info",
+      showIcon: !0,
+      message: "静默只压通知不改状态机；抑制需要成对写，source 与 target 不能是同一条规则"
+    }
+  );
+}
+function Ve() {
+  const [t, g] = l("up"), [d, f] = l([]), [i, m] = l(null), [p, E] = l(!1), [T, _] = l(!1);
+  async function x() {
+    E(!0), m(null);
+    try {
+      const o = await Me.instant(t);
+      f(Array.isArray(o) ? o : []), _(!0);
+    } catch (o) {
+      m(o.message), f([]), _(!0);
+    } finally {
+      E(!1);
+    }
+  }
+  return /* @__PURE__ */ e.jsxs(k, { title: "指标即时查询", children: [
+    /* @__PURE__ */ e.jsxs(P.Compact, { style: { width: "100%", marginBottom: 16 }, children: [
+      /* @__PURE__ */ e.jsx(
+        $,
+        {
+          style: { width: 520 },
+          value: t,
+          onChange: (o) => g(o.target.value),
+          onPressEnter: x,
+          placeholder: 'PromQL，例如 up{job="z-gw"}'
+        }
+      ),
+      /* @__PURE__ */ e.jsx(U, { type: "primary", onClick: x, loading: p, children: "查询" })
+    ] }),
+    i && /* @__PURE__ */ e.jsx(
+      M,
+      {
+        type: "warning",
+        showIcon: !0,
+        style: { marginBottom: 12 },
+        message: "指标源不可达或表达式有误",
+        description: i
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      ne,
+      {
+        rowKey: (o, j) => o.seriesKey || String(j),
+        size: "small",
+        loading: p,
+        dataSource: d,
+        pagination: { pageSize: 50 },
+        locale: {
+          emptyText: T ? "没有匹配的时序（目标可能已下线）" : "输入 PromQL 后查询"
+        },
+        columns: [
+          {
+            title: "标签",
+            dataIndex: "labels",
+            render: (o) => Object.entries(o || {}).map(([j, R]) => /* @__PURE__ */ e.jsxs(D, { children: [
+              j,
+              "=",
+              R
+            ] }, j))
+          },
+          {
+            title: "取值",
+            dataIndex: "value",
+            width: 160,
+            render: (o) => Number.isNaN(o) ? /* @__PURE__ */ e.jsx(D, { children: "NaN" }) : String(o)
+          },
+          {
+            title: "采样时间",
+            dataIndex: "timestampMillis",
+            width: 200,
+            render: (o) => new Date(o).toLocaleString()
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(q.Paragraph, { type: "secondary", style: { marginTop: 12 }, children: "M1 期间指标读的是 z-env 已有的 Prometheus 本体，z-observer 自己不落时序存储； 与第三方 Prometheus / Grafana 并存是有意为之的过渡形态。" })
+  ] });
+}
+function Ge() {
+  var i, m, p, E, T, _, x, o, j, R, C;
+  const [t, g] = l(null), [d, f] = l(null);
+  return X(() => {
+    Promise.all([te.status(), se.recent(1), J.list()]).then(([y, w, a]) => g({ logs: y, traces: w, alerts: a })).catch((y) => f(y.message));
+  }, []), /* @__PURE__ */ e.jsxs(k, { title: "z-observer 概览", children: [
+    d && /* @__PURE__ */ e.jsx(M, { type: "error", showIcon: !0, message: "读状态失败", description: d, style: { marginBottom: 16 } }),
+    /* @__PURE__ */ e.jsxs(xe, { gutter: 16, children: [
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsxs(k, { size: "small", children: [
+        /* @__PURE__ */ e.jsx(
+          z,
+          {
+            title: /* @__PURE__ */ e.jsx(re, { to: "/z-observer/logs", children: "在库日志" }),
+            value: ((i = t == null ? void 0 : t.logs) == null ? void 0 : i.liveLogs) ?? "-"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { style: { color: "#999" }, children: [
+          "累计淘汰 ",
+          ((m = t == null ? void 0 : t.logs) == null ? void 0 : m.evictedLogs) ?? "-"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsxs(k, { size: "small", children: [
+        /* @__PURE__ */ e.jsx(
+          z,
+          {
+            title: /* @__PURE__ */ e.jsx(re, { to: "/z-observer/traces", children: "在库链路" }),
+            value: ((p = t == null ? void 0 : t.traces) == null ? void 0 : p.traceCount) ?? "-"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { style: { color: "#999" }, children: [
+          "累计淘汰 ",
+          ((E = t == null ? void 0 : t.traces) == null ? void 0 : E.evictedTraces) ?? "-"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsx(k, { size: "small", children: /* @__PURE__ */ e.jsx(
+        z,
+        {
+          title: /* @__PURE__ */ e.jsx(re, { to: "/z-observer/alerts", children: "活动告警" }),
+          value: ((_ = (T = t == null ? void 0 : t.alerts) == null ? void 0 : T.active) == null ? void 0 : _.length) ?? "-",
+          valueStyle: (((o = (x = t == null ? void 0 : t.alerts) == null ? void 0 : x.active) == null ? void 0 : o.length) ?? 0) > 0 ? { color: "#cf1322" } : void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ e.jsx(L, { span: 6, children: /* @__PURE__ */ e.jsxs(k, { size: "small", children: [
+        /* @__PURE__ */ e.jsx(
+          z,
+          {
+            title: "通知失败",
+            value: ((j = t == null ? void 0 : t.alerts) == null ? void 0 : j.notificationsFailed) ?? "-",
+            valueStyle: (((R = t == null ? void 0 : t.alerts) == null ? void 0 : R.notificationsFailed) ?? 0) > 0 ? { color: "#cf1322" } : void 0
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { style: { color: "#999" }, children: [
+          "被静默压住 ",
+          ((C = t == null ? void 0 : t.alerts) == null ? void 0 : C.notificationsSilenced) ?? "-"
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+const er = { title: "z-observer 可观测性", short: "z-observer" }, rr = [
+  { key: "/z-observer/home", label: "概览", icon: /* @__PURE__ */ e.jsx(_e, {}) },
+  { key: "/z-observer/metrics", label: "指标", icon: /* @__PURE__ */ e.jsx(Se, {}) },
+  { key: "/z-observer/logs", label: "日志", icon: /* @__PURE__ */ e.jsx(ke, {}) },
+  { key: "/z-observer/traces", label: "链路", icon: /* @__PURE__ */ e.jsx(Ce, {}) },
+  { key: "/z-observer/alerts", label: "告警", icon: /* @__PURE__ */ e.jsx(Ie, {}) }
+], tr = [
+  { path: "/z-observer/home", Component: Ge },
+  { path: "/z-observer/metrics", Component: Ve },
+  { path: "/z-observer/logs", Component: Ye },
+  { path: "/z-observer/traces", Component: Fe },
+  { path: "/z-observer/alerts", Component: We }
+];
+export {
+  We as A,
+  Ge as H,
+  Ye as L,
+  Ve as M,
+  Fe as T,
+  J as a,
+  er as b,
+  Me as c,
+  te as l,
+  rr as m,
+  tr as r,
+  se as t
+};

package/dist/pages.js

@@ -0,0 +1,15 @@
+import { A as s, H as r, L as t, M as g, T as p, a as c, b as i, l as m, m as o, c as A, r as P, t as l } from "./pages-manifest-NibPRBmP.js";
+export {
+  s as AlertPage,
+  r as HomePage,
+  t as LogSearchPage,
+  g as MetricPage,
+  p as TracePage,
+  c as alertApi,
+  i as appMeta,
+  m as logApi,
+  o as menuItems,
+  A as metricApi,
+  P as routes,
+  l as traceApi
+};

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@yuku123/z-observer-component",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "z-observer 可观测性看板页面：日志检索 / 链路树 / 告警（lead 008 §8：域前端唯一真源在本仓 _frontend/）",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./pages": "./dist/pages.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@yuku123/z-frontend-common": "^1.0.0",
+    "axios": "^1.16.1",
+    "dayjs": "^1.11.10"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "react-router-dom": "^7.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "antd": "^6.0.0"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^6.2.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "antd": "^6.3.3"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.