feat(ne): batch apply jump proxy on selected NEs

Add POST /v1/managed-ne/batch-hop, shared HopProxyFields form, and toolbar button next to connectivity test.

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

web/src/components/HopProxyFields.tsx

@@ -0,0 +1,134 @@
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n";
+import { isAutoHopTemplate, zteHopTemplate } from "../utils/zteHop";
+
+export type HopProxyFieldsState = {
+  hop_host: string;
+  hop_port: number;
+  hop_protocol: string;
+  hop_username: string;
+  hop_password: string;
+  hop_command_template: string;
+  hop_vrf: string;
+};
+
+export const emptyHopProxyFields = (): HopProxyFieldsState => ({
+  hop_host: "",
+  hop_port: 22,
+  hop_protocol: "ssh",
+  hop_username: "",
+  hop_password: "",
+  hop_command_template: zteHopTemplate("ssh", ""),
+  hop_vrf: "",
+});
+
+function FormLabel({ children, required }: { children: ReactNode; required?: boolean }) {
+  return (
+    <span className="form-label">
+      {children}
+      {required ? (
+        <span className="form-label__required" title="required" aria-hidden="true">
+          {" "}
+          *
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function applyHopTemplate(
+  prev: HopProxyFieldsState,
+  protocol: string,
+  vrf: string,
+  force = false,
+): Partial<HopProxyFieldsState> {
+  if (!force && !isAutoHopTemplate(prev.hop_command_template, prev.hop_protocol, prev.hop_vrf)) {
+    return {};
+  }
+  return { hop_command_template: zteHopTemplate(protocol, vrf) };
+}
+
+type Props = {
+  value: HopProxyFieldsState;
+  onChange: (patch: Partial<HopProxyFieldsState>) => void;
+  hopPasswordRequired?: boolean;
+  hopPasswordOptional?: boolean;
+};
+
+export function HopProxyFields({
+  value,
+  onChange,
+  hopPasswordRequired = true,
+  hopPasswordOptional = false,
+}: Props) {
+  const { t } = useI18n();
+
+  const set = (patch: Partial<HopProxyFieldsState>) => onChange(patch);
+
+  return (
+    <div className="form-grid">
+      <label>
+        <FormLabel required>{t("managedNe.hop.host")}</FormLabel>
+        <input required value={value.hop_host} onChange={(e) => set({ hop_host: e.target.value })} />
+      </label>
+      <label>
+        <FormLabel>{t("managedNe.hop.port")}</FormLabel>
+        <input
+          type="number"
+          value={value.hop_port}
+          onChange={(e) => set({ hop_port: Number(e.target.value) || 22 })}
+        />
+      </label>
+      <label>
+        <FormLabel>{t("managedNe.hop.protocol")}</FormLabel>
+        <select
+          value={value.hop_protocol}
+          onChange={(e) => {
+            const hop_protocol = e.target.value;
+            set({ hop_protocol, ...applyHopTemplate(value, hop_protocol, value.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={value.hop_username} onChange={(e) => set({ hop_username: e.target.value })} />
+      </label>
+      <label>
+        <FormLabel required={hopPasswordRequired}>
+          {t("managedNe.hop.password")}
+          {hopPasswordOptional ? (
+            <span className="form-label__optional"> ({t("managedNe.form.passwordOptional")})</span>
+          ) : null}
+        </FormLabel>
+        <input
+          type="password"
+          required={hopPasswordRequired}
+          value={value.hop_password}
+          onChange={(e) => set({ hop_password: e.target.value })}
+        />
+      </label>
+      <label>
+        <FormLabel>{t("managedNe.hop.vrf")}</FormLabel>
+        <input
+          value={value.hop_vrf}
+          onChange={(e) => {
+            const hop_vrf = e.target.value;
+            set({ hop_vrf, ...applyHopTemplate(value, value.hop_protocol, hop_vrf) });
+          }}
+        />
+      </label>
+      <label className="form-grid__full">
+        <FormLabel>{t("managedNe.hop.commandTemplate")}</FormLabel>
+        <input
+          value={value.hop_command_template}
+          onChange={(e) => set({ hop_command_template: e.target.value })}
+          placeholder={zteHopTemplate(value.hop_protocol, value.hop_vrf)}
+        />
+        <span className="form-field-hint">{t("managedNe.hop.templateHint")}</span>
+      </label>
+    </div>
+  );
+}

web/src/i18n/en.ts

@@ -192,6 +192,13 @@ const en = {
       hostRequired: "Jump host is required",
       userRequired: "Jump username is required",
       passwordRequired: "Jump password is required",
+      batchAdd: "Add proxy",
+      batchTitle: "Batch add jump proxy",
+      batchHint: "Apply the jump-host settings below to {{n}} selected NE(s) (overwrites existing proxy config).",
+      batchDone: "Proxy applied to {{n}} NE(s)",
+      selectRequired: "Select network elements first",
+      applying: "Applying…",
+      apply: "Apply to selected",
     },
   },
   ume: {

web/src/i18n/zh.ts

@@ -191,6 +191,13 @@ const zh = {
       hostRequired: "请填写跳板地址",
       userRequired: "请填写跳板用户名",
       passwordRequired: "请填写跳板密码",
+      batchAdd: "添加代理",
+      batchTitle: "批量添加代理",
+      batchHint: "将以下跳板配置应用到已选中的 {{n}} 台网元（会覆盖原有跳板设置）。",
+      batchDone: "已为 {{n}} 台网元配置代理",
+      selectRequired: "请先勾选要配置的网元",
+      applying: "应用中…",
+      apply: "应用到选中网元",
     },
   },
   ume: {

web/src/pages/NePage.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState, type ReactNode } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  batchApplyHopManagedNe,
   connectTestManagedNe,
   createManagedNe,
   deleteManagedNe,
@@ -10,6 +11,7 @@ import {
   managedNeImportTemplateUrl,
   updateManagedNe,
 } from "../services/api";
+import { HopProxyFields, emptyHopProxyFields, type HopProxyFieldsState } from "../components/HopProxyFields";
 import { queryKeys } from "../constants/queryKeys";
 import { useI18n } from "../i18n";
 import { useToast } from "../hooks/useToast";
@@ -101,8 +103,10 @@ export function NePage() {
   const [pageSize, setPageSize] = useState(50);
   const [selected, setSelected] = useState<string[]>([]);
   const [modalOpen, setModalOpen] = useState(false);
+  const [batchHopOpen, setBatchHopOpen] = useState(false);
   const [editing, setEditing] = useState<ManagedNeItem | null>(null);
   const [form, setForm] = useState<FormState>(emptyForm);
+  const [batchHop, setBatchHop] = useState<HopProxyFieldsState>(emptyHopProxyFields);
 
   const metaQuery = useQuery({
     queryKey: queryKeys.managedNeMeta,
@@ -196,6 +200,27 @@ export function NePage() {
     onError: (err) => showError(String(err)),
   });
 
+  const batchHopMutation = useMutation({
+    mutationFn: () =>
+      batchApplyHopManagedNe(selected, {
+        hop_vendor: "zte",
+        hop_host: batchHop.hop_host.trim(),
+        hop_port: batchHop.hop_port,
+        hop_protocol: batchHop.hop_protocol,
+        hop_username: batchHop.hop_username.trim(),
+        hop_password: batchHop.hop_password,
+        hop_command_template: batchHop.hop_command_template.trim(),
+        hop_vrf: batchHop.hop_vrf.trim(),
+      }),
+    onSuccess: async (res) => {
+      setBatchHopOpen(false);
+      setBatchHop(emptyHopProxyFields());
+      showOk(t("managedNe.hop.batchDone", { n: res.updated }));
+      await invalidateList();
+    },
+    onError: (err) => showError(String(err)),
+  });
+
   const importMutation = useMutation({
     mutationFn: importManagedNe,
     onSuccess: async (res) => {
@@ -318,6 +343,20 @@ export function NePage() {
             >
               {connectMutation.isPending ? t("managedNe.connect.running") : t("managedNe.connect.run")}
             </button>
+            <button
+              type="button"
+              disabled={!credsOk || selected.length === 0 || batchHopMutation.isPending}
+              onClick={() => {
+                if (selected.length === 0) {
+                  showError(t("managedNe.hop.selectRequired"));
+                  return;
+                }
+                setBatchHop(emptyHopProxyFields());
+                setBatchHopOpen(true);
+              }}
+            >
+              {batchHopMutation.isPending ? t("managedNe.hop.applying") : t("managedNe.hop.batchAdd")}
+            </button>
             <button type="button" onClick={() => invalidateList()}>
               {t("common.refresh")}
             </button>
@@ -565,86 +604,20 @@ export function NePage() {
                 {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>
+                <HopProxyFields
+                  value={{
+                    hop_host: form.hop_host,
+                    hop_port: form.hop_port,
+                    hop_protocol: form.hop_protocol,
+                    hop_username: form.hop_username,
+                    hop_password: form.hop_password,
+                    hop_command_template: form.hop_command_template,
+                    hop_vrf: form.hop_vrf,
+                  }}
+                  onChange={(patch) => setForm((prev) => ({ ...prev, ...patch }))}
+                  hopPasswordRequired={!editing}
+                  hopPasswordOptional={Boolean(editing)}
+                />
               ) : null}
             </fieldset>
             <div className="modal__actions">
@@ -658,6 +631,42 @@ export function NePage() {
           </div>
         </div>
       ) : null}
+
+      {batchHopOpen ? (
+        <div className="modal-backdrop" role="presentation" onClick={() => setBatchHopOpen(false)}>
+          <div className="modal" role="dialog" onClick={(e) => e.stopPropagation()}>
+            <h3>{t("managedNe.hop.batchTitle")}</h3>
+            <p className="form-hint">{t("managedNe.hop.batchHint", { n: selected.length })}</p>
+            <HopProxyFields value={batchHop} onChange={(patch) => setBatchHop((prev) => ({ ...prev, ...patch }))} />
+            <div className="modal__actions">
+              <button type="button" onClick={() => setBatchHopOpen(false)}>
+                {t("managedNe.form.cancel")}
+              </button>
+              <button
+                type="button"
+                disabled={batchHopMutation.isPending}
+                onClick={() => {
+                  if (!batchHop.hop_host.trim()) {
+                    showError(t("managedNe.hop.hostRequired"));
+                    return;
+                  }
+                  if (!batchHop.hop_username.trim()) {
+                    showError(t("managedNe.hop.userRequired"));
+                    return;
+                  }
+                  if (!batchHop.hop_password) {
+                    showError(t("managedNe.hop.passwordRequired"));
+                    return;
+                  }
+                  batchHopMutation.mutate();
+                }}
+              >
+                {batchHopMutation.isPending ? t("managedNe.hop.applying") : t("managedNe.hop.apply")}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }

web/src/services/api.ts

@@ -129,6 +129,20 @@ export const deleteManagedNe = (id: string) => apiDelete<{ ok: boolean }>(`/v1/m
 export const connectTestManagedNe = (ids: string[]) =>
   apiPost<{ ok: boolean; submitted: number }>("/v1/managed-ne/connect-test", { ids });
 
+export const batchApplyHopManagedNe = (
+  ids: string[],
+  hop: {
+    hop_host: string;
+    hop_port: number;
+    hop_protocol: string;
+    hop_username: string;
+    hop_password: string;
+    hop_command_template: string;
+    hop_vrf: string;
+    hop_vendor?: string;
+  },
+) => apiPost<{ ok: boolean; updated: number }>("/v1/managed-ne/batch-hop", { ids, hop });
+
 export const managedNeImportTemplateUrl = (format: "xlsx" | "csv" = "xlsx") =>
   `/v1/managed-ne/import/template?format=${format}`;