[Manager] Add progress queue dialog (#3091)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/ManagerProgressDialogContent.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="overflow-hidden transition-all duration-300"
+    :class="{
+      'max-h-[500px]': isExpanded,
+      'max-h-0 p-0 m-0': !isExpanded
+    }"
+  >
+    <div
+      ref="sectionsContainerRef"
+      class="px-6 py-4 overflow-y-auto max-h-[450px] scroll-container"
+      :style="{
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
+      }"
+      :class="{
+        'max-h-[450px]': isExpanded,
+        'max-h-0': !isExpanded
+      }"
+    >
+      <div v-for="(panel, index) in taskPanels" :key="index">
+        <Panel
+          :expanded="expandedPanels[index] || false"
+          toggleable
+          class="shadow-elevation-1 rounded-lg mt-2 dark-theme:bg-black dark-theme:border-black"
+        >
+          <template #header>
+            <div class="flex items-center justify-between w-full py-2">
+              <div class="flex flex-col text-sm font-medium leading-normal">
+                <span>{{ panel.taskName }}</span>
+                <span v-show="expandedPanels[index]" class="text-muted">
+                  {{
+                    index === taskPanels.length - 1
+                      ? 'In progress'
+                      : 'Completed ✓'
+                  }}
+                </span>
+              </div>
+            </div>
+          </template>
+          <template #toggleicon>
+            <Button
+              :icon="
+                expandedPanels[index]
+                  ? 'pi pi-chevron-down'
+                  : 'pi pi-chevron-right'
+              "
+              text
+              class="text-neutral-300"
+              @click="togglePanel(index)"
+            />
+          </template>
+          <div
+            class="overflow-y-auto h-64 rounded-lg bg-black"
+            :class="{
+              'h-64': index !== taskPanels.length - 1,
+              'flex-grow': index === taskPanels.length - 1
+            }"
+          >
+            <div class="h-full">
+              <div
+                v-for="(log, logIndex) in panel.logs"
+                :key="logIndex"
+                class="text-neutral-400 dark-theme:text-muted"
+              >
+                <pre class="whitespace-pre-wrap break-words">{{ log }}</pre>
+              </div>
+            </div>
+          </div>
+        </Panel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useScroll, whenever } from '@vueuse/core'
+import Button from 'primevue/button'
+import Panel from 'primevue/panel'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import {
+  useComfyManagerStore,
+  useManagerProgressDialogStore
+} from '@/stores/comfyManagerStore'
+
+const { taskLogs } = useComfyManagerStore()
+const progressDialogContent = useManagerProgressDialogStore()
+
+const taskPanels = computed(() => taskLogs)
+const isExpanded = computed(() => progressDialogContent.isExpanded)
+
+const expandedPanels = ref<Record<number, boolean>>({})
+const togglePanel = (index: number) => {
+  expandedPanels.value[index] = !expandedPanels.value[index]
+}
+
+const sectionsContainerRef = ref<HTMLElement | null>(null)
+const { y: scrollY } = useScroll(sectionsContainerRef)
+
+const scrollToBottom = () => {
+  scrollY.value = sectionsContainerRef.value?.scrollHeight ?? 0
+}
+
+whenever(() => isExpanded.value, scrollToBottom)
+onMounted(() => {
+  expandedPanels.value = {}
+  scrollToBottom()
+})
+
+onBeforeUnmount(() => {
+  progressDialogContent.collapse()
+})
+</script>

src/components/dialog/footer/ManagerProgressFooter.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="w-full px-6 py-4 shadow-lg flex items-center justify-between"
+    :class="{
+      'rounded-t-none': progressDialogContent.isExpanded,
+      'rounded-lg': !progressDialogContent.isExpanded
+    }"
+  >
+    <div class="justify-center text-sm font-bold leading-none">
+      <div class="flex items-center">
+        <template v-if="isInProgress">
+          <i class="pi pi-spin pi-spinner mr-2 text-3xl" />
+          <span>{{ currentTaskName }}</span>
+        </template>
+        <template v-else>
+          <i class="pi pi-check-circle mr-2 text-green-500" />
+          <span class="leading-none">{{
+            $t('manager.restartToApplyChanges')
+          }}</span>
+        </template>
+      </div>
+    </div>
+    <div class="flex items-center gap-4">
+      <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
+        {{ comfyManagerStore.uncompletedCount }} of
+        {{ comfyManagerStore.taskLogs.length }}
+      </span>
+      <div class="flex items-center">
+        <Button
+          v-if="!isInProgress"
+          rounded
+          outlined
+          class="px-4 py-2 rounded-md mr-4"
+          @click="handleRestart"
+        >
+          {{ $t('g.restart') }}
+        </Button>
+        <Button
+          :icon="
+            progressDialogContent.isExpanded
+              ? 'pi pi-chevron-up'
+              : 'pi pi-chevron-right'
+          "
+          text
+          rounded
+          size="small"
+          severity="secondary"
+          :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
+          @click.stop="progressDialogContent.toggle"
+        />
+        <Button
+          icon="pi pi-times"
+          text
+          rounded
+          size="small"
+          severity="secondary"
+          aria-label="Close"
+          @click.stop="closeDialog"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { api } from '@/scripts/api'
+import { useComfyManagerService } from '@/services/comfyManagerService'
+import {
+  useComfyManagerStore,
+  useManagerProgressDialogStore
+} from '@/stores/comfyManagerStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const progressDialogContent = useManagerProgressDialogStore()
+const comfyManagerStore = useComfyManagerStore()
+
+const isInProgress = computed(() => comfyManagerStore.uncompletedCount > 0)
+
+const closeDialog = () => {
+  dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
+}
+
+const fallbackTaskName = t('g.installing')
+const currentTaskName = computed(() => {
+  if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
+  const task = comfyManagerStore.taskLogs.at(-1)
+  return task?.taskName ?? fallbackTaskName
+})
+
+const handleRestart = async () => {
+  await useComfyManagerService().rebootComfyUI()
+  closeDialog()
+
+  const onReconnect = () => {
+    useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+  }
+  useEventListener(api, 'reconnected', onReconnect, { once: true })
+}
+</script>

src/components/dialog/header/ManagerProgressHeader.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-if="progressDialogContent.isExpanded"
+    class="px-4 py-2 flex items-center"
+  >
+    <TabMenu
+      v-model:activeIndex="activeTabIndex"
+      :model="tabs"
+      class="w-full border-none"
+      :pt="{
+        menu: { class: 'border-none' },
+        menuitem: { class: 'font-medium' },
+        action: { class: 'px-4 py-2' }
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TabMenu from 'primevue/tabmenu'
+import { ref } from 'vue'
+
+import { useManagerProgressDialogStore } from '@/stores/comfyManagerStore'
+
+const progressDialogContent = useManagerProgressDialogStore()
+const activeTabIndex = ref(0)
+
+const tabs = [{ label: 'Installation Queue' }, { label: 'Failed (0)' }]
+</script>