fix(#832): fixed task-abort in dashboard

The functionality to abort a task was totally
broken in the dashboard. This was fixed now.

Signed-off-by: Tobias Anker <tobias.anker@kitsunemimi.moe>

Author: kitsudaiki

CHANGELOG.md

@@ -50,6 +50,8 @@
 - restarts of the same sakura-host doesn't result in duplications in hanami anymore
 - progress-bar in dashboard for multiple epochs is now calculated correctly
 - fixed number of output-values in case of int and float output-type
+- task-abort-endpoint not works
+- task-abort-modal was fixed in the dashboard
 
 ## v0.10.0
 

src/binaries/sakura/src/api/routes/v1alpha.rs

@@ -66,7 +66,8 @@ pub fn v1alpha_routes() -> Scope {
                         ))
                         .service(resource("/{task_uuid}").route(get().to(get_task_v1_0::get_task)))
                         .service(
-                            resource("/{task_uuid}/abort").route(put().to(abort_task_v1_0::abort_task)),
+                            resource("/{task_uuid}/abort")
+                                .route(put().to(abort_task_v1_0::abort_task)),
                         )
                         .service(resource("").route(get().to(list_task_v1_0::list_task))),
                 ),

src/dashboard/app/src/components/workload/model/model_delete_modal.vue

@@ -54,7 +54,7 @@ import { getAuthContext } from "@/auth_context";
 import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
-    model: { uuid: number; name: string } | null;
+    model: { uuid: string; name: string } | null;
     icons: { acceptIcon: string; cancelIcon: string };
 }
 defineProps<Props>();

src/dashboard/app/src/components/workload/task/task_abort_modal.vue

@@ -0,0 +1,96 @@
+<!-- 
+// Copyright 2022-2026 Tobias Anker <tobias.anker@kitsunemimi.moe>
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+//     http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License. 
+-->
+
+<template>
+    <div class="modal-overlay" @click.self="cancel">
+        <div class="modal task-delete-modal">
+            <div class="modal-topbar">
+                <span>Abort task</span>
+            </div>
+            <div class="modal-content">
+                <p>Are you sure you want to abort?</p>
+                <strong>Task: {{ task?.uuid }}</strong>
+            </div>
+
+            <div class="modal-bottombar">
+                <div class="modal-actions">
+                    <button
+                        class="icon-button"
+                        @click="handleAccept(task?.uuid, model_uuid, torii_port)"
+                    >
+                        <img :src="icons.acceptIcon" alt="Accept" />
+                    </button>
+                    <button class="icon-button" @click="cancel">
+                        <img :src="icons.cancelIcon" alt="Cancel" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import axios from "axios";
+
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
+
+interface Props {
+    model_uuid: string;
+    torii_port: number;
+    task: { uuid: string } | null;
+    icons: { acceptIcon: string; cancelIcon: string };
+}
+defineProps<Props>();
+const emit = defineEmits<{
+    (e: "accept"): void;
+    (e: "cancel"): void;
+}>();
+const errorPopupMsg = ref<string>("");
+
+async function handleAccept(task_uuid: string, model_uuid: string, torii_port: number) {
+    if (!task_uuid) return;
+    try {
+        const authContext = getAuthContext();
+        const sakura_api = axios.create({
+            baseURL: `${authContext.torii_base_address}:${torii_port}`,
+        });
+
+        await sakura_api.put(`/v1alpha/model/${model_uuid}/task/${task_uuid}/abort`, {}, {
+            headers: { Authorization: `Bearer ${authContext.token}` },
+        });
+
+        emit("accept");
+    } catch (err) {
+        errorPopupMsg.value = handleAxiosError(err, "Failed to delete task");
+    }
+}
+
+function cancel() {
+    emit("cancel");
+}
+</script>
+
+<style scoped>
+.task-delete-modal {
+    width: 30rem;
+}
+</style>

src/dashboard/app/src/components/workload/task/task_overview.vue

@@ -55,8 +55,8 @@
                                     v-if="openDropdown === task.uuid"
                                     class="table-dropdown-menu"
                                 >
-                                    <button @click="openDeleteModal(task)">
-                                        Delete
+                                    <button @click="openAbortModal(task)">
+                                        Abort
                                     </button>
                                 </div>
                             </div>
@@ -76,6 +76,16 @@
             @accept="acceptAddModal"
             @cancel="cancelAddModal"
         />
+
+        <TaskAbortModal
+            v-if="showAbortModal"
+            :model_uuid="props.id"
+            :torii_port="torii_port"
+            :task="taskToAbort"
+            :icons="icons"
+            @accept="acceptAbortModal"
+            @cancel="cancelAbortModal"
+        />
     </div>
     <div v-if="errorPopupMsg" class="error-popup">
         <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
@@ -90,6 +100,7 @@ import axios from "axios";
 
 import { getAuthContext } from "@/auth_context";
 import TaskCreateModal from "./task_create_modal.vue";
+import TaskAbortModal from "./task_abort_modal.vue";
 import ProgressBar from "./progress_bar.vue";
 import { handleAxiosError } from "@/handleAxiosError";
 
@@ -102,6 +113,9 @@ const tasks = ref<{ uuid: string; taskName: string }[]>([]);
 const showAddModal = ref(false);
 const openDropdown = ref<string | null>(null);
 const icons = inject<{ acceptIcon: string; cancelIcon: string }>("icons")!;
+const taskToAbort = ref<{ uuid: string } | null>(null);
+const showAbortModal = ref(false);
+
 var torii_port = 0;
 
 async function fetchTasks() {
@@ -171,6 +185,25 @@ async function acceptAddModal() {
     cancelAddModal();
 }
 
+//=============================================================================
+// Abort modal
+//=============================================================================
+function openAbortModal(task: { uuid: string }) {
+    taskToAbort.value = task;
+    showAbortModal.value = true;
+    openDropdown.value = null;
+}
+function cancelAbortModal() {
+    showAbortModal.value = false;
+    taskToAbort.value = null;
+    openDropdown.value = null; // close any open action dropdown
+}
+
+async function acceptAbortModal() {
+    await fetchTasks();
+    cancelAbortModal();
+}
+
 //=============================================================================
 // Listener
 //=============================================================================