fix: show host action log modal immediately on SSH/WinRM update (0.20.9)

Open progress dialog when agent update starts so long-running remote scripts do not look frozen.

frontend/src/components/HostActionLogModal.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="open" class="modal-backdrop" @click.self="onBackdropClick">
+    <div class="modal-card host-action-log-modal" role="dialog" aria-modal="true">
+      <h3>{{ title }}</h3>
+      <p v-if="loading" class="host-action-log-status">
+        <span class="host-action-log-spinner" aria-hidden="true" />
+        Выполняется на удалённом хосте… Это может занять несколько минут.
+      </p>
+      <p v-if="message" :class="messageClass">{{ message }}</p>
+      <pre v-if="output" class="host-action-log-output">{{ output }}</pre>
+      <div class="modal-actions">
+        <button type="button" class="secondary" :disabled="loading" @click="emit('close')">
+          {{ loading ? "Выполняется…" : "Закрыть" }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  open: boolean;
+  title: string;
+  loading: boolean;
+  ok: boolean | null;
+  message: string;
+  output: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const messageClass = computed(() => {
+  if (props.loading || props.ok == null) return "muted";
+  return props.ok ? "success" : "error";
+});
+
+function onBackdropClick() {
+  if (!props.loading) emit("close");
+}
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-card {
+  background: var(--card-bg, #1e2430);
+  border: 1px solid var(--border, #3a4556);
+  border-radius: 8px;
+  max-width: 820px;
+  width: 100%;
+  max-height: 85vh;
+  overflow: auto;
+  padding: 1rem 1.25rem;
+}
+
+.host-action-log-status {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  margin: 0.75rem 0;
+  color: #9aa4b2;
+}
+
+.host-action-log-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #3a4556;
+  border-top-color: #58a6ff;
+  border-radius: 50%;
+  animation: host-action-log-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes host-action-log-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.host-action-log-output {
+  margin-top: 0.75rem;
+  max-height: 24rem;
+  overflow: auto;
+  padding: 0.75rem;
+  background: #0d1117;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+}
+
+.modal-actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+</style>

frontend/src/version.ts

@@ -1,4 +1,4 @@
 /** Fallback до загрузки /health; при релизе держите в sync с backend/app/version.py */
 export const APP_NAME = "Security Alert Center";
-export const APP_VERSION = "0.20.8";
+export const APP_VERSION = "0.20.9";
 export const APP_VERSION_LABEL = `${APP_NAME} v.${APP_VERSION}`;

frontend/src/views/HostDetailView.vue

@@ -91,7 +91,7 @@
             {{ runningAgentFallback ? "Обновление…" : "Обновить через WinRM" }}
           </button>
         </div>
-        <p v-if="agentControlMessage" :class="agentControlOk ? 'success' : 'error'">{{ agentControlMessage }}</p>
+        <p v-if="agentControlMessage && !actionLog.open" :class="agentControlOk ? 'success' : 'error'">{{ agentControlMessage }}</p>
       </div>
       <div v-if="isLinuxHost" class="host-actions">
         <div class="host-actions-row">
@@ -135,15 +135,11 @@
             {{ runningAgentFallback ? "Fallback…" : "Fallback SSH" }}
           </button>
         </div>
-        <p v-if="agentControlMessage" :class="agentControlOk ? 'success' : 'error'">{{ agentControlMessage }}</p>
+        <p v-if="agentControlMessage && !actionLog.open" :class="agentControlOk ? 'success' : 'error'">{{ agentControlMessage }}</p>
         <div v-if="showSshTestFeedback && (sshTestMessage || sshTestOutput)" class="host-action-feedback">
           <p :class="sshTestOk ? 'success' : 'error'">{{ sshTestMessage }}</p>
           <pre v-if="sshTestOutput" class="host-ssh-output">{{ sshTestOutput }}</pre>
         </div>
-        <div v-if="agentUpdateMessage || agentUpdateOutput" class="host-action-feedback">
-          <p :class="agentUpdateOk ? 'success' : 'error'">{{ agentUpdateMessage }}</p>
-          <pre v-if="agentUpdateOutput" class="host-ssh-output">{{ agentUpdateOutput }}</pre>
-        </div>
       </div>
     </div>
 
@@ -276,6 +272,16 @@
       </div>
     </template>
   </template>
+
+  <HostActionLogModal
+    :open="actionLog.open"
+    :title="actionLog.title"
+    :loading="actionLog.loading"
+    :ok="actionLog.ok"
+    :message="actionLog.message"
+    :output="actionLog.output"
+    @close="closeActionLog"
+  />
 </template>
 
 <script setup lang="ts">
@@ -294,8 +300,10 @@ import {
   patchHostAgentConfig,
   type EventListResponse,
   type HostDetail,
+  type HostSshActionResult,
 } from "../api";
 import { emitHostPatch } from "../utils/hostPatchBus";
+import HostActionLogModal from "../components/HostActionLogModal.vue";
 
 const HOST_ACTION_FEEDBACK_MS = 30_000;
 
@@ -320,9 +328,14 @@ const showSshTestFeedback = ref(false);
 const sshTestMessage = ref("");
 const sshTestOk = ref(false);
 const sshTestOutput = ref("");
-const agentUpdateMessage = ref("");
-const agentUpdateOk = ref(false);
-const agentUpdateOutput = ref("");
+const actionLog = reactive({
+  open: false,
+  title: "",
+  loading: false,
+  ok: null as boolean | null,
+  message: "",
+  output: "",
+});
 const requestingAgentUpdate = ref(false);
 const runningAgentFallback = ref(false);
 const agentControlMessage = ref("");
@@ -596,6 +609,59 @@ function formatSshOutput(result: { stdout: string | null; stderr: string | null;
   return parts.join("\n\n");
 }
 
+function openActionLog(title: string) {
+  actionLog.open = true;
+  actionLog.title = title;
+  actionLog.loading = true;
+  actionLog.ok = null;
+  actionLog.message = "Подключение к хосту и выполнение команды…";
+  actionLog.output = "";
+}
+
+function finishActionLog(result: { ok: boolean; message: string; output?: string }) {
+  actionLog.loading = false;
+  actionLog.ok = result.ok;
+  actionLog.message = result.message;
+  actionLog.output = result.output ?? "";
+}
+
+function closeActionLog() {
+  if (actionLog.loading) return;
+  actionLog.open = false;
+}
+
+async function runRemoteHostAction(
+  title: string,
+  request: () => Promise<HostSshActionResult>,
+  options: { refreshHost?: boolean; applyProductVersion?: boolean } = {},
+) {
+  openActionLog(title);
+  try {
+    const result = await request();
+    finishActionLog({
+      ok: result.ok,
+      message: result.message,
+      output: formatSshOutput(result),
+    });
+    if (result.ok && result.product_version && host.value && options.applyProductVersion !== false) {
+      host.value = { ...host.value, product_version: result.product_version };
+      emitHostPatch(host.value);
+    } else if (host.value && result.ssh_admin_ok != null) {
+      host.value = { ...host.value, ssh_admin_ok: result.ssh_admin_ok };
+    }
+    if (options.refreshHost) {
+      await loadHost({ preserveActionLog: true });
+    }
+    return result;
+  } catch (e) {
+    finishActionLog({
+      ok: false,
+      message: e instanceof Error ? e.message : "Ошибка выполнения",
+    });
+    return null;
+  }
+}
+
 function applyHostDetail(detail: HostDetail) {
   host.value = detail;
   syncConfigFormFromHost(detail);
@@ -623,18 +689,17 @@ async function runRequestAgentUpdate() {
 async function runAgentFallback() {
   runningAgentFallback.value = true;
   agentControlMessage.value = "";
+  const title = isWindowsHost.value ? "Обновление через WinRM" : "Fallback SSH (ssh-monitor)";
   try {
-    const result = await runHostAgentUpdateFallback(hostId.value);
-    agentControlOk.value = result.ok;
-    agentControlMessage.value = result.message;
-    if (result.ok && result.product_version && host.value) {
-      host.value = { ...host.value, product_version: result.product_version };
-      emitHostPatch(host.value);
+    const result = await runRemoteHostAction(
+      title,
+      () => runHostAgentUpdateFallback(hostId.value),
+      { refreshHost: true },
+    );
+    if (result) {
+      agentControlOk.value = result.ok;
+      agentControlMessage.value = result.message;
     }
-    await loadHost();
-  } catch (e) {
-    agentControlOk.value = false;
-    agentControlMessage.value = e instanceof Error ? e.message : "Ошибка fallback-обновления";
   } finally {
     runningAgentFallback.value = false;
   }
@@ -667,7 +732,7 @@ async function saveAgentConfig() {
   }
 }
 
-async function loadHost() {
+async function loadHost(options: { preserveActionLog?: boolean } = {}) {
   loading.value = true;
   error.value = "";
   winRmTestMessage.value = "";
@@ -678,8 +743,9 @@ async function loadHost() {
   showSshTestFeedback.value = false;
   sshTestMessage.value = "";
   sshTestOutput.value = "";
-  agentUpdateMessage.value = "";
-  agentUpdateOutput.value = "";
+  if (!options.preserveActionLog) {
+    closeActionLog();
+  }
   try {
     const detail = await fetchHost(hostId.value);
     applyHostDetail(detail);
@@ -695,14 +761,13 @@ async function loadHost() {
 
 async function runAgentUpdate() {
   updatingAgent.value = true;
-  agentUpdateMessage.value = "";
-  agentUpdateOutput.value = "";
   try {
-    const result = await updateHostAgentViaSsh(hostId.value);
-    agentUpdateOk.value = result.ok;
-    agentUpdateMessage.value = result.message;
-    agentUpdateOutput.value = formatSshOutput(result);
-    if (result.ok) {
+    const result = await runRemoteHostAction(
+      "Обновление ssh-monitor (SSH)",
+      () => updateHostAgentViaSsh(hostId.value),
+      { refreshHost: false },
+    );
+    if (result?.ok) {
       const detail = await fetchHost(hostId.value);
       if (result.product_version) {
         detail.product_version = result.product_version;
@@ -711,12 +776,7 @@ async function runAgentUpdate() {
         detail.ssh_admin_ok = result.ssh_admin_ok;
       }
       applyHostDetail(detail);
-    } else if (host.value && result.ssh_admin_ok != null) {
-      host.value = { ...host.value, ssh_admin_ok: result.ssh_admin_ok };
     }
-  } catch (e) {
-    agentUpdateOk.value = false;
-    agentUpdateMessage.value = e instanceof Error ? e.message : "Ошибка обновления агента";
   } finally {
     updatingAgent.value = false;
   }