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.
2026-06-20 19:34:12 +10:00
parent ec5ec62240
commit 2c2f78eba9
4 changed files with 206 additions and 36 deletions
@@ -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>