fix: show helm install log in SSE

hsluoyz · hsluoyz · commit b5499cb7b410 · 2026-06-25T21:03:49.000+08:00
diff --git a/controllers/helm.go b/controllers/helm.go
@@ -211,6 +211,41 @@ func (c *ApiController) InstallHelmChart() {
 	c.ResponseOk()
 }
 
+// InstallHelmChartStream streams helm install progress as Server-Sent Events.
+// @router /api/install-helm-chart-stream [post]
+func (c *ApiController) InstallHelmChartStream() {
+	if c.RequireAdmin() {
+		return
+	}
+	cfg := getAdminRestConfig()
+	if cfg == nil {
+		c.Ctx.ResponseWriter.ResponseWriter.Header().Set("Content-Type", "text/event-stream")
+		fmt.Fprintf(c.Ctx.ResponseWriter.ResponseWriter, "data: ERROR: cluster not ready\n\n")
+		return
+	}
+	var req helmInstallReq
+	if err := json.Unmarshal(c.Ctx.Input.RequestBody, &req); err != nil {
+		c.Ctx.ResponseWriter.ResponseWriter.Header().Set("Content-Type", "text/event-stream")
+		fmt.Fprintf(c.Ctx.ResponseWriter.ResponseWriter, "data: ERROR: %s\n\n", err.Error())
+		return
+	}
+
+	w := c.Ctx.ResponseWriter.ResponseWriter
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("X-Accel-Buffering", "no")
+	w.WriteHeader(http.StatusOK)
+
+	flusher, canFlush := w.(http.Flusher)
+	logCh := store.InstallHelmChartStream(cfg, req.ReleaseName, req.Namespace, req.ChartName, req.RepoURL, req.Version, req.ValuesYAML)
+	for line := range logCh {
+		fmt.Fprintf(w, "data: %s\n\n", line)
+		if canFlush {
+			flusher.Flush()
+		}
+	}
+}
+
 // UpgradeHelmRelease upgrades an existing Helm release.
 // @router /api/upgrade-helm-release [post]
 func (c *ApiController) UpgradeHelmRelease() {
diff --git a/routers/router.go b/routers/router.go
@@ -136,6 +136,7 @@ func InitAPI() {
 	beego.Router("/api/get-helm-chart-values", &controllers.ApiController{}, "GET:GetHelmChartValues")
 	beego.Router("/api/get-helm-releases", &controllers.ApiController{}, "GET:GetHelmReleases")
 	beego.Router("/api/install-helm-chart", &controllers.ApiController{}, "POST:InstallHelmChart")
+	beego.Router("/api/install-helm-chart-stream", &controllers.ApiController{}, "POST:InstallHelmChartStream")
 	beego.Router("/api/upgrade-helm-release", &controllers.ApiController{}, "POST:UpgradeHelmRelease")
 	beego.Router("/api/rollback-helm-release", &controllers.ApiController{}, "POST:RollbackHelmRelease")
 	beego.Router("/api/uninstall-helm-release", &controllers.ApiController{}, "POST:UninstallHelmRelease")
diff --git a/store/helm.go b/store/helm.go
@@ -114,8 +114,12 @@ func (r *restClientGetter) ToRawKubeConfigLoader() clientcmd.ClientConfig {
 // ---------- action.Configuration builder ----------
 
 func newHelmConfig(cfg *rest.Config, namespace string) (*action.Configuration, error) {
+	return newHelmConfigWithLog(cfg, namespace, func(string, ...interface{}) {})
+}
+
+func newHelmConfigWithLog(cfg *rest.Config, namespace string, logFn func(string, ...interface{})) (*action.Configuration, error) {
 	actionConfig := new(action.Configuration)
-	if err := actionConfig.Init(newRESTClientGetter(cfg, namespace), namespace, "secret", func(string, ...interface{}) {}); err != nil {
+	if err := actionConfig.Init(newRESTClientGetter(cfg, namespace), namespace, "secret", logFn); err != nil {
 		return nil, fmt.Errorf("helm config init: %w", err)
 	}
 	return actionConfig, nil
@@ -330,6 +334,45 @@ func InstallHelmChart(cfg *rest.Config, releaseName, namespace, chartName, repoU
 	return err
 }
 
+// InstallHelmChartStream runs helm install asynchronously and pushes log lines to the returned channel.
+// The channel is closed when the operation finishes; a final line of "ERROR: <msg>" or "DONE" signals the outcome.
+func InstallHelmChartStream(cfg *rest.Config, releaseName, namespace, chartName, repoURL, version, valuesYAML string) <-chan string {
+	ch := make(chan string, 64)
+	go func() {
+		defer close(ch)
+		logFn := func(format string, args ...interface{}) {
+			ch <- fmt.Sprintf(format, args...)
+		}
+		actionConfig, err := newHelmConfigWithLog(cfg, namespace, logFn)
+		if err != nil {
+			ch <- "ERROR: " + err.Error()
+			return
+		}
+		chart, err := loadChart(chartName, repoURL, version)
+		if err != nil {
+			ch <- "ERROR: " + err.Error()
+			return
+		}
+		vals, err := parseValues(valuesYAML)
+		if err != nil {
+			ch <- "ERROR: " + err.Error()
+			return
+		}
+		install := action.NewInstall(actionConfig)
+		install.ReleaseName = releaseName
+		install.Namespace = namespace
+		install.CreateNamespace = true
+		install.Wait = true
+		install.Timeout = 5 * time.Minute
+		if _, err = install.Run(chart, vals); err != nil {
+			ch <- "ERROR: " + err.Error()
+			return
+		}
+		ch <- "DONE"
+	}()
+	return ch
+}
+
 func UpgradeHelmRelease(cfg *rest.Config, releaseName, namespace, chartName, repoURL, version, valuesYAML string) error {
 	actionConfig, err := newHelmConfig(cfg, namespace)
 	if err != nil {
diff --git a/web/src/HelmInstallModal.js b/web/src/HelmInstallModal.js
@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from "react";
-import {Alert, Form, Input, Modal, Select, Spin, Typography} from "antd";
+import React, {useEffect, useRef, useState} from "react";
+import {Alert, Button, Form, Input, Modal, Select, Spin, Typography} from "antd";
 import {useTranslation} from "react-i18next";
 import * as HelmBackend from "./backend/HelmBackend";
 import * as NamespaceBackend from "./backend/NamespaceBackend";
@@ -12,12 +12,17 @@ export default function HelmInstallModal({open, chart, onClose, onInstalled}) {
   const [namespaces, setNamespaces] = useState([]);
   const [valuesYAML, setValuesYAML] = useState("");
   const [valuesLoading, setValuesLoading] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
+  const [installing, setInstalling] = useState(false);
+  const [done, setDone] = useState(false);
   const [error, setError] = useState(null);
+  const [logs, setLogs] = useState([]);
+  const logEndRef = useRef(null);
 
   useEffect(() => {
     if (!open || !chart) {return;}
     setError(null);
+    setLogs([]);
+    setDone(false);
 
     NamespaceBackend.getNamespaces().then(res => {
       if (res.status === "ok") {
@@ -47,38 +52,56 @@ export default function HelmInstallModal({open, chart, onClose, onInstalled}) {
     }
   }, [open, chart, form]);
 
+  useEffect(() => {
+    if (logEndRef.current) {
+      logEndRef.current.scrollIntoView({behavior: "smooth"});
+    }
+  }, [logs]);
+
   const handleClose = () => {
     form.resetFields();
     setValuesYAML("");
     setError(null);
+    setLogs([]);
+    setDone(false);
+    setInstalling(false);
     onClose();
   };
 
   const handleOk = () => {
+    if (done) {
+      onInstalled?.();
+      handleClose();
+      return;
+    }
     form.validateFields().then(values => {
-      setSubmitting(true);
+      setInstalling(true);
       setError(null);
-      HelmBackend.installHelmChart({
-        releaseName: values.releaseName,
-        namespace: values.namespace,
-        chartName: chart.chartName,
-        repoURL: chart.repoURL,
-        version: values.version || chart.version,
-        valuesYAML,
-      }).then(res => {
-        if (res.status === "ok") {
+      setLogs([]);
+      HelmBackend.installHelmChartStream(
+        {
+          releaseName: values.releaseName,
+          namespace: values.namespace,
+          chartName: chart.chartName,
+          repoURL: chart.repoURL,
+          version: values.version || chart.version,
+          valuesYAML,
+        },
+        line => setLogs(prev => [...prev, line])
+      )
+        .then(() => {
+          setDone(true);
           onInstalled?.();
-          handleClose();
-        } else {
-          setError(res.msg);
-        }
-      }).catch(e => setError(e.message)).finally(() => setSubmitting(false));
+        })
+        .catch(e => setError(e.message))
+        .finally(() => setInstalling(false));
     });
   };
 
   if (!chart) {return null;}
 
   const nsOptions = namespaces.map(ns => ({label: ns.name, value: ns.name}));
+  const showLog = installing || done || error;
 
   return (
     <Modal
@@ -93,57 +116,101 @@ export default function HelmInstallModal({open, chart, onClose, onInstalled}) {
         </span>
       }
       open={open}
-      onOk={handleOk}
-      onCancel={handleClose}
-      okText={t("helm:Install")}
-      confirmLoading={submitting}
-      width={680}
+      onCancel={installing ? undefined : handleClose}
+      closable={!installing}
+      maskClosable={!installing}
+      footer={
+        <div style={{display: "flex", justifyContent: "flex-end", gap: 8}}>
+          {!installing && (
+            <Button onClick={handleClose}>{done ? t("general:Close") : t("general:Cancel")}</Button>
+          )}
+          {!done && (
+            <Button type="primary" loading={installing} onClick={handleOk}>
+              {t("helm:Install")}
+            </Button>
+          )}
+          {done && (
+            <Button type="primary" onClick={handleOk}>
+              {t("general:Done")}
+            </Button>
+          )}
+        </div>
+      }
+      width={700}
       destroyOnHidden
     >
-      {error && <Alert type="error" message={error} showIcon style={{marginBottom: 16}} closable onClose={() => setError(null)} />}
+      {error && (
+        <Alert type="error" message={error} showIcon style={{marginBottom: 16}} closable onClose={() => setError(null)} />
+      )}
 
-      <Form form={form} layout="vertical">
-        <div style={{display: "flex", gap: 12}}>
-          <Form.Item
-            style={{flex: 1}}
-            label={t("helm:Release name")}
-            name="releaseName"
-            rules={[
-              {required: true},
-              {pattern: /^[a-z0-9][a-z0-9-]*$/, message: t("helm:Release name pattern")},
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item style={{flex: 1}} label={t("general:Namespaces")} name="namespace" rules={[{required: true}]}>
-            <Select options={nsOptions} showSearch />
-          </Form.Item>
-          <Form.Item style={{width: 130}} label={t("helm:Version")} name="version">
-            <Input placeholder={chart.version ?? "latest"} />
+      {!showLog && (
+        <Form form={form} layout="vertical">
+          <div style={{display: "flex", gap: 12}}>
+            <Form.Item
+              style={{flex: 1}}
+              label={t("helm:Release name")}
+              name="releaseName"
+              rules={[
+                {required: true},
+                {pattern: /^[a-z0-9][a-z0-9-]*$/, message: t("helm:Release name pattern")},
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item style={{flex: 1}} label={t("general:Namespaces")} name="namespace" rules={[{required: true}]}>
+              <Select options={nsOptions} showSearch />
+            </Form.Item>
+            <Form.Item style={{width: 130}} label={t("helm:Version")} name="version">
+              <Input placeholder={chart.version ?? "latest"} />
+            </Form.Item>
+          </div>
+
+          <Form.Item label={t("helm:Values (YAML)")}>
+            {valuesLoading ? (
+              <div style={{textAlign: "center", padding: 24}}>
+                <Spin size="small" />
+                <Text style={{marginLeft: 8, color: "rgba(0,0,0,0.45)"}}>{t("helm:Loading values")}</Text>
+              </div>
+            ) : (
+              <textarea
+                value={valuesYAML}
+                onChange={e => setValuesYAML(e.target.value)}
+                rows={14}
+                style={{
+                  width: "100%", fontFamily: "monospace", fontSize: 12,
+                  padding: "8px 10px", borderRadius: 6,
+                  border: "1px solid #d9d9d9", resize: "vertical", outline: "none",
+                  boxSizing: "border-box",
+                }}
+                spellCheck={false}
+              />
+            )}
           </Form.Item>
-        </div>
+        </Form>
+      )}
 
-        <Form.Item label={t("helm:Values (YAML)")}>
-          {valuesLoading ? (
-            <div style={{textAlign: "center", padding: 24}}>
-              <Spin size="small" /> <Text style={{marginLeft: 8, color: "rgba(0,0,0,0.45)"}}>{t("helm:Loading values")}</Text>
-            </div>
-          ) : (
-            <textarea
-              value={valuesYAML}
-              onChange={e => setValuesYAML(e.target.value)}
-              rows={14}
-              style={{
-                width: "100%", fontFamily: "monospace", fontSize: 12,
-                padding: "8px 10px", borderRadius: 6,
-                border: "1px solid #d9d9d9", resize: "vertical", outline: "none",
-                boxSizing: "border-box",
-              }}
-              spellCheck={false}
-            />
+      {showLog && (
+        <div
+          style={{
+            background: "#1a1a1a", borderRadius: 6, padding: "10px 14px",
+            fontFamily: "monospace", fontSize: 12, color: "#d4d4d4",
+            height: 320, overflowY: "auto", lineHeight: 1.6,
+          }}
+        >
+          {logs.length === 0 && installing && (
+            <span style={{color: "#888"}}>
+              <Spin size="small" style={{marginRight: 8}} />
+              {t("helm:Installing")}...
+            </span>
           )}
-        </Form.Item>
-      </Form>
+          {logs.map((line, i) => (
+            <div key={i} style={{color: line.startsWith("ERROR") ? "#f87171" : done && i === logs.length - 1 ? "#4ade80" : "#d4d4d4"}}>
+              {line}
+            </div>
+          ))}
+          <div ref={logEndRef} />
+        </div>
+      )}
     </Modal>
   );
 }
diff --git a/web/src/backend/HelmBackend.js b/web/src/backend/HelmBackend.js
@@ -50,6 +50,32 @@ export function installHelmChart(payload) {
   }).then(r => r.json());
 }
 
+// installHelmChartStream posts the payload then reads the SSE response line-by-line.
+// onLine(line) is called for each log line; returns a promise that resolves on "DONE" or rejects on "ERROR: ...".
+export async function installHelmChartStream(payload, onLine) {
+  const resp = await fetch(`${Setting.ServerUrl}/api/install-helm-chart-stream`, {
+    method: "POST", credentials: "include", headers: jsonHeaders(), body: JSON.stringify(payload),
+  });
+  const reader = resp.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = "";
+  for (;;) {
+    const {done, value} = await reader.read(); // eslint-disable-line no-await-in-loop
+    if (done) {break;}
+    buf += decoder.decode(value, {stream: true});
+    const parts = buf.split("\n\n");
+    buf = parts.pop();
+    for (const part of parts) {
+      const line = part.replace(/^data: /, "");
+      if (line) {
+        onLine(line);
+        if (line.startsWith("ERROR: ")) {throw new Error(line.slice(7));}
+        if (line === "DONE") {return;}
+      }
+    }
+  }
+}
+
 export function upgradeHelmRelease(payload) {
   return fetch(`${Setting.ServerUrl}/api/upgrade-helm-release`, {
     method: "POST", credentials: "include", headers: jsonHeaders(), body: JSON.stringify(payload),
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
