From 5b77c6f32707f60e1eed65d4103134f2daa75764 Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Thu, 28 May 2026 14:21:19 +0800
Subject: [PATCH] feat(ume): collapse NE and alarms panels by default

Default the UME NE list and current alarms sections to collapsed state and add explicit expand/collapse toggles for cleaner initial layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/i18n/en.ts        |  4 ++++
 web/src/i18n/zh.ts        |  4 ++++
 web/src/pages/UmePage.tsx | 24 ++++++++++++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index c1050fd..9685338 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -260,6 +260,8 @@ const en = {
     },
     ne: {
       title: "Network elements",
+      showPanel: "Expand",
+      hidePanel: "Collapse",
       keywordPh: "keyword(ne_id/ne_name/user_label/ip/host_name)",
       clearTitle: "Clear keyword and reset to page 1",
       expand: "Expand details",
@@ -267,6 +269,8 @@ const en = {
     },
     alarms: {
       title: "Current alarms",
+      showPanel: "Expand",
+      hidePanel: "Collapse",
       keywordPh: "keyword(alarm key/cause/ne_name/host_name/ip…)",
       hostNamePh: "host_name (contains)",
       allSeverity: "All severities",
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index db65dd3..f1a2d10 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -259,6 +259,8 @@ const zh = {
     },
     ne: {
       title: "网元清单",
+      showPanel: "展开",
+      hidePanel: "收起",
       keywordPh: "keyword(ne_id/ne_name/user_label/ip/host_name)",
       clearTitle: "清空 keyword，回到第 1 页",
       expand: "展开详情",
@@ -266,6 +268,8 @@ const zh = {
     },
     alarms: {
       title: "当前告警",
+      showPanel: "展开",
+      hidePanel: "收起",
       keywordPh: "keyword(告警键/原因/ne_name/host_name/ip 等)",
       hostNamePh: "host_name（含匹配）",
       allSeverity: "全部级别",
diff --git a/web/src/pages/UmePage.tsx b/web/src/pages/UmePage.tsx
index 6e4df9c..6a30171 100644
--- a/web/src/pages/UmePage.tsx
+++ b/web/src/pages/UmePage.tsx
@@ -34,12 +34,14 @@ export function UmePage() {
   const [nePage, setNePage] = useState(1);
   const [nePageSize, setNePageSize] = useState(50);
   const [expandedNeId, setExpandedNeId] = useState("");
+  const [nePanelOpen, setNePanelOpen] = useState(false);
   const [curSeverity, setCurSeverity] = useState("");
   const [curCleared, setCurCleared] = useState("");
   const [curHostName, setCurHostName] = useState("");
   const [curKeyword, setCurKeyword] = useState("");
   const [curPage, setCurPage] = useState(1);
   const [curPageSize, setCurPageSize] = useState(50);
+  const [alarmsPanelOpen, setAlarmsPanelOpen] = useState(false);
 
   const syncMutation = useMutation({
     mutationFn: async (domains: string[]) => apiPost<{ ok: boolean; jobs: unknown[] }>("/v1/ume/sync", { domains }),
@@ -700,7 +702,14 @@ export function UmePage() {
       </section>
 
       <section className="panel">
-        <h2>{t("ume.ne.title")}</h2>
+        <div className="panel__toolbar">
+          <h2>{t("ume.ne.title")}</h2>
+          <button type="button" className="link-btn" onClick={() => setNePanelOpen((x) => !x)}>
+            {nePanelOpen ? t("ume.ne.hidePanel") : t("ume.ne.showPanel")}
+          </button>
+        </div>
+        {nePanelOpen ? (
+          <>
         <div className="filter-inline">
           <input value={neKeyword} placeholder={t("ume.ne.keywordPh")} onChange={(e) => setNeKeyword(e.target.value)} />
           <button type="button" onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.umeNEAll })}>
@@ -801,10 +810,19 @@ export function UmePage() {
             </select>
           </div>
         </div>
+          </>
+        ) : null}
       </section>
 
       <section className="panel">
-        <h2>{t("ume.alarms.title")}</h2>
+        <div className="panel__toolbar">
+          <h2>{t("ume.alarms.title")}</h2>
+          <button type="button" className="link-btn" onClick={() => setAlarmsPanelOpen((x) => !x)}>
+            {alarmsPanelOpen ? t("ume.alarms.hidePanel") : t("ume.alarms.showPanel")}
+          </button>
+        </div>
+        {alarmsPanelOpen ? (
+          <>
         <div className="filter-inline">
           <input value={curKeyword} placeholder={t("ume.alarms.keywordPh")} onChange={(e) => setCurKeyword(e.target.value)} />
           <input value={curHostName} placeholder={t("ume.alarms.hostNamePh")} onChange={(e) => setCurHostName(e.target.value)} />
@@ -903,6 +921,8 @@ export function UmePage() {
             </select>
           </div>
         </div>
+          </>
+        ) : null}
       </section>
     </>
   );