feat: Task center supports switching nodes (#11315)

Author: zhengkunwang223

frontend/src/api/modules/log.ts

@@ -18,8 +18,9 @@ export const cleanLogs = (param: Log.CleanLog) => {
     return http.post(`/core/logs/clean`, param);
 };
 
-export const searchTasks = (req: Log.SearchTaskReq) => {
-    return http.post<ResPage<Log.Task>>(`/logs/tasks/search`, req);
+export const searchTasks = (req: Log.SearchTaskReq, node?: string) => {
+    const params = node ? `?operateNode=${node}` : '';
+    return http.post<ResPage<Log.Task>>(`/logs/tasks/search${params}`, req);
 };
 
 export const countExecutingTask = () => {

frontend/src/components/node-select/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <el-select
+        :model-value="modelValue"
+        @update:model-value="handleChange"
+        class="p-w-200"
+        :placeholder="$t('setting.selectNode')"
+    >
+        <el-option
+            v-for="item in nodes"
+            :key="item.id"
+            :label="item.name === 'local' ? globalStore.getMasterAlias() : item.name"
+            :value="item.name"
+        ></el-option>
+    </el-select>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { listAllNodes } from '@/api/modules/setting';
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { globalStore } = useGlobalStore();
+
+defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const nodes = ref([]);
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const handleChange = (value) => {
+    emit('update:modelValue', value);
+    emit('change', value);
+};
+
+const listNodes = async () => {
+    try {
+        const res = await listAllNodes();
+        nodes.value = res.data || [];
+    } catch (error) {}
+};
+
+onMounted(() => {
+    listNodes();
+});
+</script>

frontend/src/components/task-list/index.vue

@@ -1,13 +1,10 @@
 <template>
-    <DrawerPro
-        v-model="open"
-        size="large"
-        :header="$t('menu.msgCenter')"
-        :resource="globalStore.currentNode"
-        @close="handleClose"
-    >
+    <DrawerPro v-model="open" size="large" :header="$t('menu.msgCenter')" @close="handleClose">
         <template #content>
             <LayoutContent v-loading="loading" :title="$t('logs.task')">
+                <template #leftToolBar>
+                    <NodeSelect v-model="targeNode" @change="search()" />
+                </template>
                 <template #rightToolBar>
                     <el-select v-model="req.status" @change="search()" clearable class="p-w-200">
                         <template #prefix>{{ $t('commons.table.status') }}</template>
@@ -50,11 +47,13 @@
 </template>
 
 <script setup lang="ts">
+import TaskLog from '@/components/log/task/index.vue';
+import NodeSelect from '@/components/node-select/index.vue';
+
 import { dateFormat } from '@/utils/util';
 import { searchTasks } from '@/api/modules/log';
 import { reactive, ref } from 'vue';
 import { Log } from '@/api/interface/log';
-import TaskLog from '@/components/log/task/index.vue';
 import bus from '@/global/bus';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
@@ -79,14 +78,15 @@ const req = reactive({
     page: 1,
     pageSize: 10,
 });
+const targeNode = ref('local');
 
 const search = async () => {
     bus.emit('refreshTask', true);
     req.page = paginationConfig.currentPage;
     req.pageSize = paginationConfig.pageSize;
     loading.value = true;
     try {
-        const res = await searchTasks(req);
+        const res = await searchTasks(req, targeNode.value);
         loading.value = false;
         data.value = res.data.items;
         paginationConfig.total = res.data.total;
@@ -101,6 +101,7 @@ const openTaskLog = (row: Log.Task) => {
 };
 
 const acceptParams = () => {
+    targeNode.value = globalStore.currentNode;
     search();
     open.value = true;
 };