refactor: Allow clear finished task

xmcl-keystone-ui/locales/de.yaml

@@ -1316,6 +1316,7 @@ tag:
   newTag: Neuer Tag
 task:
   cancelled: Abgesagt
+  clear: Erledigte Aufgaben löschen
   empty: Keine Aufgaben laufen
   failed: Gescheitert
   manager: Aufgaben-Manager

xmcl-keystone-ui/locales/en.yaml

@@ -1240,6 +1240,7 @@ tag:
   newTag: New Tag
 task:
   cancelled: Cancelled
+  clear: Clear Finished Tasks
   empty: No Running Tasks
   failed: Failed
   manager: Task Manager

xmcl-keystone-ui/locales/es-ES.yaml

@@ -935,6 +935,7 @@ tag:
   newTag: Nueva Etiqueta
 task:
   cancelled: Cancelada
+  clear: Borrar tareas terminadas
   empty: No hay Tareas en Ejecución
   failed: Fallida
   manager: Gestor de Tareas

xmcl-keystone-ui/locales/fr.yaml

@@ -1286,6 +1286,7 @@ tag:
   newTag: Nouveau tag
 task:
   cancelled: Annulé
+  clear: Effacer les tâches terminées
   empty: Aucune tâche en cours d'exécution
   failed: Échec
   manager: Gestionnaire des tâches

xmcl-keystone-ui/locales/ru.yaml

@@ -1194,6 +1194,7 @@ tag:
   newTag: Новый тег
 task:
   cancelled: Отменено
+  clear: Очистить завершенные задачи
   empty: Нет запущенных задач
   failed: Не удалось
   manager: Диспетчер задач

xmcl-keystone-ui/locales/uk.yaml

@@ -1244,6 +1244,7 @@ tag:
   newTag: Новий тег
 task:
   cancelled: Скасовано
+  clear: Очистити виконані завдання
   empty: Немає запущених завдань
   failed: Не вдалося
   manager: Диспетчер завдань

xmcl-keystone-ui/locales/zh-CN.yaml

@@ -1185,6 +1185,7 @@ task:
   cancelled: 已取消
   empty: 目前没有运行中的任务
   failed: 失败
+  clear: 清除已完成的任务
   manager: 任务管理器
   nTaskRunning: '{count} 个任务运行中'
   name: 任务 | 任务

xmcl-keystone-ui/locales/zh-TW.yaml

@@ -526,6 +526,7 @@ tag:
   newTag: 新標籤
 task:
   cancelled: 已取消
+  clear: 清除已完成的任務
   empty: 目前沒有運行中的任務
   failed: 失敗
   manager: 任務管理器

xmcl-keystone-ui/src/composables/taskManager.ts

@@ -1,96 +1,18 @@
-import { computed, InjectionKey, onMounted, onUnmounted, reactive, Ref, ref } from 'vue'
 import { TaskItem } from '@/entities/task'
+import { InjectionKey, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 import { TaskAddedPayload, TaskBatchUpdatePayloads, TaskPayload, TaskState } from '@xmcl/runtime-api'
-import { injection } from '@/util/inject'
+import { task } from '../../../xmcl/packages/task'
 
 export const kTaskManager: InjectionKey<ReturnType<typeof useTaskManager>> = Symbol('TASK_MANAGER')
 
-class ChildrenWatcher {
-  readonly oldChildren: Array<TaskItem> = []
-
-  readonly newChildren: Array<TaskItem> = []
-
-  readonly updateChildren: Array<TaskItem> = []
-
-  readonly visited: Set<TaskItem> = new Set()
-
-  public dirty = false
-
-  constructor(private target: TaskItem, init?: TaskItem[]) {
-    if (init) {
-      this.newChildren = init
-      this.dirty = true
-      this.update()
-    }
-  }
-
-  addChild(item: TaskItem) {
-    this.newChildren.unshift(item)
-    this.dirty = true
-  }
-
-  updateChild(item: TaskItem) {
-    this.updateChildren.push(item)
-    this.dirty = true
-  }
-
-  update() {
-    if (!this.dirty) {
-      return
-    }
-    const inactive = []
-    const active = []
-    const newChildren = this.newChildren
-    const updatedChildren = this.updateChildren
-    const oldChildren = this.oldChildren
-    const visited = this.visited
-
-    for (const item of newChildren) {
-      if (item.state === TaskState.Succeed) {
-        inactive.push(item)
-      } else {
-        active.push(item)
-      }
-      visited.add(item)
-    }
-    for (const item of updatedChildren) {
-      if (item.state === TaskState.Succeed) {
-        inactive.push(item)
-      } else {
-        active.push(item)
-      }
-      visited.add(item)
-    }
-    for (const item of oldChildren) {
-      if (visited.has(item)) continue
-      if (item.state === TaskState.Succeed) {
-        inactive.push(item)
-      } else {
-        active.push(item)
-      }
-      visited.add(item)
-    }
-    const sorted = active.concat(inactive)
-
-    // only show 10
-    const result = sorted.slice(0, 10)
-    this.target.children = result
-
-    updatedChildren.splice(0)
-    newChildren.splice(0)
-    oldChildren.splice(0)
-    oldChildren.push(...sorted)
-    visited.clear()
-  }
-}
-
 /**
  * Create a task manager based on vue reactivity
  * @returns
  */
 export function useTaskManager() {
-  const cache: Record<string, TaskItem> = {}
+  const cache: Record<string, WeakRef<TaskItem> | undefined> = {}
+
   const throughput = ref(0)
   /**
    * All tasks
@@ -142,29 +64,31 @@ export function useTaskManager() {
     for (const add of adds) {
       const { uuid, parentId, path, id: _id } = add
       const id = `${uuid}@${_id}`
-      if (cache[id]) {
+      if (cache[id]?.deref()) {
         console.warn(`Skip for duplicated task ${id} ${path}`)
         continue
       }
       const item = getTaskItem(add)
       if (typeof parentId === 'number') {
         // this is child task
-        const parent = cache[`${uuid}@${parentId}`]
+        const parent = cache[`${uuid}@${parentId}`]?.deref()
         // Push to the static children and mark dirty
         // We don't update the reactive children
         // Until the consumer (task-viewer) need to render the children
-        parent.rawChildren?.push(item)
-        parent.childrenDirty = true
+        parent?.rawChildren?.push(item)
+        if (parent) {
+          parent.childrenDirty = true
+        }
       } else {
         tasks.value.unshift(item)
       }
-      cache[id] = item
+      cache[id] = new WeakRef(item)
       // console.log(`Add task ${add.path}(${id})`)
     }
     for (const update of updates) {
       const { uuid, id, time, to, from, progress, total, chunkSize, state, error } = update
       const localId = `${uuid}@${id}`
-      const item = cache[localId]
+      const item = cache[localId]?.deref()
       if (item) {
         if (state !== undefined) {
           item.state = state
@@ -181,9 +105,6 @@ export function useTaskManager() {
           item.throughput += chunkSize
           throughput.value += chunkSize
         }
-      } else {
-        console.log(`Cannot apply update for task ${localId} as task not found.`)
-        console.log(cache)
       }
     }
   }
@@ -196,7 +117,7 @@ export function useTaskManager() {
       const result = payload.map(getTaskItem)
       tasks.value = result
       for (const r of result) {
-        cache[r.id] = r
+        cache[r.id] = new WeakRef(r)
       }
       _resolve()
     })
@@ -206,9 +127,14 @@ export function useTaskManager() {
     taskMonitor.removeListener('task-update', onTaskUpdate)
   })
 
+  function clear() {
+    tasks.value = tasks.value.filter(t => t.state !== TaskState.Cancelled && t.state !== TaskState.Succeed)
+  }
+
   return {
     dictionary: cache,
     throughput,
+    clear,
     tasks,
     pause,
     resume,

xmcl-keystone-ui/src/views/AppTaskDialogTaskView.vue

@@ -2,8 +2,12 @@
   <v-card
     flat
     style="min-height: 300px; max-height: 400px; max-width: 100%; overflow: auto;"
+    class="flex flex-col"
   >
-    <v-toolbar tabs>
+    <v-toolbar
+      tabs
+      class="flex-grow-0"
+    >
       <v-toolbar-title>{{ t('task.manager') }}</v-toolbar-title>
       <v-spacer />
       <v-btn
@@ -68,6 +72,20 @@
         </template>
       </v-treeview>
     </v-card-text>
+    <div class="flex-grow" />
+    <v-card-actions class="flex flex-grow-0">
+      <div class="flex-grow" />
+      <v-btn
+        text
+        small
+        @click="clear"
+      >
+        <v-icon left>
+          delete_forever
+        </v-icon>
+        {{ t('task.clear') }}
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -88,7 +106,7 @@ interface TaskItemOrGroup extends TaskItem {
   groupedCount: number
 }
 
-const { tasks: all, pause, resume, cancel } = injection(kTaskManager)
+const { tasks: all, pause, resume, cancel, clear } = injection(kTaskManager)
 const { t } = useI18n()
 const tTask = useTaskName()