feat(ne): ZTE jump host for connect test and collection

Add hop fields and encrypted credentials, unified Netmiko session factory with ZTE ssh/telnet CLI templates and secondary auth, wire connect/collect paths, and NE management UI with auto-suggested jump commands.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/i18n/en.ts

@@ -176,6 +176,23 @@ const en = {
       passwordRequired: "Password is required",
       passwordOptional: "leave blank to keep unchanged",
     },
+    hop: {
+      sectionTitle: "ZTE jump host",
+      enable: "Connect to target via jump host",
+      host: "Jump host",
+      port: "Jump port",
+      protocol: "Jump protocol",
+      username: "Jump username",
+      password: "Jump password",
+      vrf: "Mgmt VRF (optional)",
+      commandTemplate: "Jump command template",
+      templateHint:
+        "ZTE CLI: telnet {target_ip}, telnet {target_ip} vrf {vrf}, ssh {target_ip}, ssh {target_ip} vrf {vrf}. Auto-suggested from jump protocol/VRF; same when left blank. Target credentials via secondary auth prompts.",
+      badge: "hop",
+      hostRequired: "Jump host is required",
+      userRequired: "Jump username is required",
+      passwordRequired: "Jump password is required",
+    },
   },
   ume: {
     token: {

web/src/i18n/zh.ts

@@ -175,6 +175,23 @@ const zh = {
       passwordRequired: "请填写密码",
       passwordOptional: "留空则不修改",
     },
+    hop: {
+      sectionTitle: "ZTE 跳板机",
+      enable: "经跳板登录目标网元",
+      host: "跳板地址",
+      port: "跳板端口",
+      protocol: "跳板协议",
+      username: "跳板用户名",
+      password: "跳板密码",
+      vrf: "管理 VRF（可选）",
+      commandTemplate: "跳登命令模板",
+      templateHint:
+        "ZTE 常用：telnet {target_ip}、telnet {target_ip} vrf {vrf}、ssh {target_ip}、ssh {target_ip} vrf {vrf}。按跳板协议与 VRF 自动推荐；留空时后端同样规则。目标账号密码由二次认证提示输入。",
+      badge: "跳板",
+      hostRequired: "请填写跳板地址",
+      userRequired: "请填写跳板用户名",
+      passwordRequired: "请填写跳板密码",
+    },
   },
   ume: {
     token: {

web/src/index.css

@@ -876,6 +876,40 @@ pre {
   grid-column: 1 / -1;
 }
 
+.form-fieldset {
+  margin-top: 16px;
+  padding: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+}
+
+.form-fieldset legend {
+  padding: 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.form-check {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #334155;
+}
+
+.table-tag {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
 .form-grid--single {
   grid-template-columns: 1fr;
 }

web/src/pages/NePage.tsx

@@ -16,6 +16,7 @@ import { useToast } from "../hooks/useToast";
 import type { ManagedNeItem } from "../types";
 import { pageCount } from "../utils/display";
 import { formatSystemTime } from "../utils/time";
+import { isAutoHopTemplate, zteHopTemplate } from "../utils/zteHop";
 
 type FormState = {
   name: string;
@@ -28,6 +29,14 @@ type FormState = {
   password: string;
   tags: string;
   remark: string;
+  hop_enabled: boolean;
+  hop_host: string;
+  hop_port: number;
+  hop_protocol: string;
+  hop_username: string;
+  hop_password: string;
+  hop_command_template: string;
+  hop_vrf: string;
 };
 
 const emptyForm = (): FormState => ({
@@ -41,8 +50,23 @@ const emptyForm = (): FormState => ({
   password: "",
   tags: "",
   remark: "",
+  hop_enabled: false,
+  hop_host: "",
+  hop_port: 22,
+  hop_protocol: "ssh",
+  hop_username: "",
+  hop_password: "",
+  hop_command_template: zteHopTemplate("ssh", ""),
+  hop_vrf: "",
 });
 
+function applyHopTemplate(prev: FormState, protocol: string, vrf: string, force = false): Partial<FormState> {
+  if (!force && !isAutoHopTemplate(prev.hop_command_template, prev.hop_protocol, prev.hop_vrf)) {
+    return {};
+  }
+  return { hop_command_template: zteHopTemplate(protocol, vrf) };
+}
+
 function FormLabel({ children, required }: { children: ReactNode; required?: boolean }) {
   return (
     <span className="form-label">
@@ -120,10 +144,25 @@ export function NePage() {
         username: form.username,
         tags: form.tags,
         remark: form.remark,
+        hop_enabled: form.hop_enabled,
+        hop_vendor: "zte",
+        hop_host: form.hop_host,
+        hop_port: form.hop_port,
+        hop_protocol: form.hop_protocol,
+        hop_username: form.hop_username,
+        hop_command_template: form.hop_command_template,
+        hop_vrf: form.hop_vrf,
         ...(form.password ? { password: form.password } : {}),
+        ...(form.hop_password ? { hop_password: form.hop_password } : {}),
       };
+      if (form.hop_enabled) {
+        if (!form.hop_host.trim()) throw new Error(t("managedNe.hop.hostRequired"));
+        if (!form.hop_username.trim()) throw new Error(t("managedNe.hop.userRequired"));
+        if (!editing && !form.hop_password) throw new Error(t("managedNe.hop.passwordRequired"));
+      }
       if (editing) {
         if (!form.password) delete (body as { password?: string }).password;
+        if (!form.hop_password) delete (body as { hop_password?: string }).hop_password;
         return updateManagedNe(editing.id, body);
       }
       if (!form.password) throw new Error(t("managedNe.form.passwordRequired"));
@@ -200,6 +239,20 @@ export function NePage() {
       password: "",
       tags: row.tags,
       remark: row.remark,
+      hop_enabled: row.hop_enabled,
+      hop_host: row.hop_host,
+      hop_port: row.hop_port,
+      hop_protocol: row.hop_protocol,
+      hop_username: row.hop_username,
+      hop_password: "",
+      hop_command_template: isAutoHopTemplate(
+        row.hop_command_template,
+        row.hop_protocol,
+        row.hop_vrf,
+      )
+        ? zteHopTemplate(row.hop_protocol, row.hop_vrf)
+        : row.hop_command_template || zteHopTemplate(row.hop_protocol, row.hop_vrf),
+      hop_vrf: row.hop_vrf,
     });
     setModalOpen(true);
   };
@@ -339,6 +392,11 @@ export function NePage() {
                 <td>{row.device_type}</td>
                 <td>
                   {row.ip_address}:{row.port}/{row.protocol}
+                  {row.hop_enabled ? (
+                    <span className="table-tag" title={`${row.hop_host}:${row.hop_port}`}>
+                      {t("managedNe.hop.badge")}
+                    </span>
+                  ) : null}
                 </td>
                 <td>{row.username}</td>
                 <td>
@@ -488,6 +546,107 @@ export function NePage() {
                 <input value={form.remark} onChange={(e) => setForm({ ...form, remark: e.target.value })} />
               </label>
             </div>
+
+            <fieldset className="form-fieldset form-grid__full">
+              <legend>{t("managedNe.hop.sectionTitle")}</legend>
+              <label className="form-check">
+                <input
+                  type="checkbox"
+                  checked={form.hop_enabled}
+                  onChange={(e) => {
+                    const hop_enabled = e.target.checked;
+                    setForm((prev) => ({
+                      ...prev,
+                      hop_enabled,
+                      ...(hop_enabled ? applyHopTemplate(prev, prev.hop_protocol, prev.hop_vrf, true) : {}),
+                    }));
+                  }}
+                />
+                {t("managedNe.hop.enable")}
+              </label>
+              {form.hop_enabled ? (
+                <div className="form-grid">
+                  <label>
+                    <FormLabel required>{t("managedNe.hop.host")}</FormLabel>
+                    <input
+                      required
+                      value={form.hop_host}
+                      onChange={(e) => setForm({ ...form, hop_host: e.target.value })}
+                    />
+                  </label>
+                  <label>
+                    <FormLabel>{t("managedNe.hop.port")}</FormLabel>
+                    <input
+                      type="number"
+                      value={form.hop_port}
+                      onChange={(e) => setForm({ ...form, hop_port: Number(e.target.value) || 22 })}
+                    />
+                  </label>
+                  <label>
+                    <FormLabel>{t("managedNe.hop.protocol")}</FormLabel>
+                    <select
+                      value={form.hop_protocol}
+                      onChange={(e) => {
+                        const hop_protocol = e.target.value;
+                        setForm((prev) => ({
+                          ...prev,
+                          hop_protocol,
+                          ...applyHopTemplate(prev, hop_protocol, prev.hop_vrf),
+                        }));
+                      }}
+                    >
+                      <option value="ssh">ssh</option>
+                      <option value="telnet">telnet</option>
+                    </select>
+                  </label>
+                  <label>
+                    <FormLabel required>{t("managedNe.hop.username")}</FormLabel>
+                    <input
+                      required
+                      value={form.hop_username}
+                      onChange={(e) => setForm({ ...form, hop_username: e.target.value })}
+                    />
+                  </label>
+                  <label>
+                    <FormLabel required={!editing}>
+                      {t("managedNe.hop.password")}
+                      {editing ? (
+                        <span className="form-label__optional"> ({t("managedNe.form.passwordOptional")})</span>
+                      ) : null}
+                    </FormLabel>
+                    <input
+                      type="password"
+                      required={!editing}
+                      value={form.hop_password}
+                      onChange={(e) => setForm({ ...form, hop_password: e.target.value })}
+                    />
+                  </label>
+                  <label>
+                    <FormLabel>{t("managedNe.hop.vrf")}</FormLabel>
+                    <input
+                      value={form.hop_vrf}
+                      onChange={(e) => {
+                        const hop_vrf = e.target.value;
+                        setForm((prev) => ({
+                          ...prev,
+                          hop_vrf,
+                          ...applyHopTemplate(prev, prev.hop_protocol, hop_vrf),
+                        }));
+                      }}
+                    />
+                  </label>
+                  <label className="form-grid__full">
+                    <FormLabel>{t("managedNe.hop.commandTemplate")}</FormLabel>
+                    <input
+                      value={form.hop_command_template}
+                      onChange={(e) => setForm({ ...form, hop_command_template: e.target.value })}
+                      placeholder={zteHopTemplate(form.hop_protocol, form.hop_vrf)}
+                    />
+                    <span className="form-field-hint">{t("managedNe.hop.templateHint")}</span>
+                  </label>
+                </div>
+              ) : null}
+            </fieldset>
             <div className="modal__actions">
               <button type="button" onClick={() => setModalOpen(false)}>
                 {t("managedNe.form.cancel")}

web/src/types.ts

@@ -135,6 +135,14 @@ export type ManagedNeItem = {
   connect_tested_at: string | null;
   tags: string;
   remark: string;
+  hop_enabled: boolean;
+  hop_vendor: string;
+  hop_host: string;
+  hop_port: number;
+  hop_protocol: string;
+  hop_username: string;
+  hop_command_template: string;
+  hop_vrf: string;
   created_at: string;
   updated_at: string;
 };

web/src/utils/zteHop.ts

@@ -0,0 +1,19 @@
+/** ZTE device CLI jump commands: ssh/telnet <ip> [vrf <name>]. */
+
+const LEGACY_HOP_TEMPLATES = new Set([
+  "ssh {target_user}@{target_ip}",
+  "ssh {target_ip}",
+  "telnet {target_ip}",
+]);
+
+export function zteHopTemplate(protocol: string, vrf: string): string {
+  const cmd = String(protocol || "ssh").toLowerCase() === "telnet" ? "telnet" : "ssh";
+  const v = String(vrf || "").trim();
+  return v ? `${cmd} {target_ip} vrf {vrf}` : `${cmd} {target_ip}`;
+}
+
+export function isAutoHopTemplate(template: string, protocol: string, vrf: string): boolean {
+  const t = String(template || "").trim();
+  if (!t || LEGACY_HOP_TEMPLATES.has(t)) return true;
+  return t === zteHopTemplate(protocol, vrf);
+}