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

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-Cubmz47-.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-Cubmz47-.js

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

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.