web: migrate System Task list to web

authentik/admin/templates/administration/task/list.html

@@ -1,84 +0,0 @@
-{% extends "administration/base.html" %}
-
-{% load i18n %}
-{% load humanize %}
-{% load authentik_utils %}
-
-{% block content %}
-<section class="pf-c-page__main-section pf-m-light">
-    <div class="pf-c-content">
-        <h1>
-            <i class="pf-icon pf-icon-automation"></i>
-            {% trans 'System Tasks' %}
-        </h1>
-        <p>{% trans "Long-running operations which authentik executes in the background." %}</p>
-    </div>
-</section>
-<section class="pf-c-page__main-section pf-m-no-padding-mobile">
-    <div class="pf-c-card">
-        <div class="pf-c-toolbar">
-            <div class="pf-c-toolbar__content">
-                <button role="ak-refresh" class="pf-c-button pf-m-primary">
-                    {% trans 'Refresh' %}
-                </button>
-            </div>
-        </div>
-        <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
-            <thead>
-                <tr role="row">
-                    <th role="columnheader" scope="col">{% trans 'Identifier' %}</th>
-                    <th role="columnheader" scope="col">{% trans 'Description' %}</th>
-                    <th role="columnheader" scope="col">{% trans 'Last Run' %}</th>
-                    <th role="columnheader" scope="col">{% trans 'Status' %}</th>
-                    <th role="columnheader" scope="col">{% trans 'Messages' %}</th>
-                    <th role="cell"></th>
-                </tr>
-            </thead>
-            <tbody role="rowgroup">
-                {% for task in object_list %}
-                <tr role="row">
-                    <th role="columnheader">
-                        <span>{{ task.html_name|join:"_&shy;" }}</span>
-                    </th>
-                    <td role="cell">
-                        <span>
-                            {{ task.task_description }}
-                        </span>
-                    </td>
-                    <td role="cell">
-                        <span>
-                            {{ task.finish_timestamp|naturaltime }}
-                        </span>
-                    </td>
-                    <td role="cell">
-                        <span>
-                            {% if task.result.status == task_successful %}
-                            <i class="fas fa-check pf-m-success"></i> {% trans 'Successful' %}
-                            {% elif task.result.status == task_warning %}
-                            <i class="fas fa-exclamation-triangle pf-m-warning"></i> {% trans 'Warning' %}
-                            {% elif task.result.status == task_error %}
-                            <i class="fas fa-times pf-m-danger"></i> {% trans 'Error' %}
-                            {% else %}
-                            <i class="fas fa-question-circle"></i> {% trans 'Unknown' %}
-                            {% endif %}
-                        </span>
-                    </td>
-                    <td>
-                        {% for message in task.result.messages %}
-                        <div>
-                            {{ message }}
-                        </div>
-                        {% endfor %}
-                    </td>
-                    <td>
-                        <ak-action-button url="{% url 'authentik_api:admin_system_tasks-retry' pk=task.task_name %}">
-                            {% trans 'Retry Task' %}
-                        </ak-action-button>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-</section>
-{% endblock %}

authentik/admin/urls.py

@@ -20,7 +20,6 @@ from authentik.admin.views import (
     stages_bindings,
     stages_invitations,
     stages_prompts,
-    tasks,
     tokens,
     users,
 )
@@ -323,12 +322,6 @@ urlpatterns = [
         outposts_service_connections.OutpostServiceConnectionDeleteView.as_view(),
         name="outpost-service-connection-delete",
     ),
-    # Tasks
-    path(
-        "tasks/",
-        tasks.TaskListView.as_view(),
-        name="tasks",
-    ),
     # Event Notification Transpots
     path(
         "events/transports/create/",

authentik/admin/views/tasks.py

@@ -1,23 +0,0 @@
-"""authentik Tasks List"""
-from typing import Any
-
-from django.views.generic.base import TemplateView
-
-from authentik.admin.mixins import AdminRequiredMixin
-from authentik.events.monitored_tasks import TaskInfo, TaskResultStatus
-
-
-class TaskListView(AdminRequiredMixin, TemplateView):
-    """Show list of all background tasks"""
-
-    template_name = "administration/task/list.html"
-
-    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
-        kwargs = super().get_context_data(**kwargs)
-        kwargs["object_list"] = sorted(
-            TaskInfo.all().values(), key=lambda x: x.task_name
-        )
-        kwargs["task_successful"] = TaskResultStatus.SUCCESSFUL
-        kwargs["task_warning"] = TaskResultStatus.WARNING
-        kwargs["task_error"] = TaskResultStatus.ERROR
-        return kwargs

web/src/api/SystemTask.ts

@@ -0,0 +1,33 @@
+import { DefaultClient, QueryArguments } from "./Client";
+
+export enum TaskStatus {
+    SUCCESSFUL = 1,
+    WARNING = 2,
+    ERROR = 4,
+}
+
+export class SystemTask {
+
+    task_name: string;
+    task_description: string;
+    task_finish_timestamp: number;
+    status: TaskStatus;
+    messages: string[];
+
+    constructor() {
+        throw Error();
+    }
+
+    static get(task_name: string): Promise<SystemTask> {
+        return DefaultClient.fetch<SystemTask>(["admin", "system_tasks", task_name]);
+    }
+
+    static list(filter?: QueryArguments): Promise<SystemTask[]> {
+        return DefaultClient.fetch<SystemTask[]>(["admin", "system_tasks"], filter);
+    }
+
+    static retry(task_name: string): string {
+        return DefaultClient.makeUrl(["admin", "system_tasks", task_name, "retry"]);
+    }
+
+}

web/src/interfaces/AdminInterface.ts

@@ -8,7 +8,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     new SidebarItem("Library", "/library"),
     new SidebarItem("Monitor").children(
         new SidebarItem("Overview", "/administration/overview"),
-        new SidebarItem("System Tasks", "/administration/tasks/"),
+        new SidebarItem("System Tasks", "/administration/system-tasks"),
     ).when((): Promise<boolean> => {
         return User.me().then(u => u.is_superuser);
     }),

web/src/pages/system-tasks/SystemTaskListPage.ts

@@ -0,0 +1,87 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { TablePage } from "../../elements/table/TablePage";
+
+import "../../elements/buttons/ModalButton";
+import "../../elements/buttons/SpinnerButton";
+import "../../elements/buttons/ActionButton";
+import { TableColumn } from "../../elements/table/Table";
+import { SystemTask, TaskStatus } from "../../api/SystemTask";
+
+@customElement("ak-system-task-list")
+export class SystemTaskListPage extends TablePage<SystemTask> {
+    searchEnabled(): boolean {
+        return false;
+    }
+    pageTitle(): string {
+        return gettext("System Tasks");
+    }
+    pageDescription(): string {
+        return gettext("Long-running operations which authentik executes in the background.");
+    }
+    pageIcon(): string {
+        return gettext("pf-icon pf-icon-automation");
+    }
+
+    @property()
+    order = "slug";
+
+    apiEndpoint(page: number): Promise<AKResponse<SystemTask>> {
+        return SystemTask.list({
+            ordering: this.order,
+            page: page,
+        }).then((tasks) => {
+            return {
+                pagination: {
+                    count: tasks.length,
+                    total_pages: 1,
+                    start_index: 0,
+                    end_index: tasks.length,
+                    current: 1,
+                },
+                results: tasks,
+            };
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Identifier", "task_name"),
+            new TableColumn("Description"),
+            new TableColumn("Last run"),
+            new TableColumn("Status"),
+            new TableColumn("Messages"),
+            new TableColumn(""),
+        ];
+    }
+
+    taskStatus(task: SystemTask): TemplateResult {
+        switch (task.status) {
+            case TaskStatus.SUCCESSFUL:
+                return html`<i class="fas fa-check pf-m-success" > </i> ${gettext("Successful")}`;
+            case TaskStatus.WARNING:
+                return html`<i class="fas fa-exclamation-triangle pf-m-warning" > </i> ${gettext("Warning")}`;
+            case TaskStatus.ERROR:
+                return html`<i class="fas fa-times pf-m-danger" > </i> ${gettext("Error")}`;
+            default:
+                return html`<i class="fas fa-question-circle" > </i> ${gettext("Unknown")}`;
+        }
+    }
+
+    row(item: SystemTask): TemplateResult[] {
+        return [
+            html`${item.task_name}`,
+            html`${item.task_description}`,
+            html`${new Date(item.task_finish_timestamp * 1000).toLocaleString()}`,
+            this.taskStatus(item),
+            html`${item.messages.map(m => {
+                return html`<li>${m}</li>`;
+            })}`,
+            html`<ak-action-button url=${SystemTask.retry(item.task_name)}>
+                ${gettext("Retry Task")}
+            </ak-action-button>`,
+        ];
+    }
+
+}

web/src/routes.ts

@@ -21,6 +21,7 @@ import "./pages/providers/ProviderViewPage";
 import "./pages/sources/SourcesListPage";
 import "./pages/sources/SourceViewPage";
 import "./pages/groups/GroupListPage";
+import "./pages/system-tasks/SystemTaskListPage";
 
 export const ROUTES: Route[] = [
     // Prevent infinite Shell loops
@@ -28,6 +29,7 @@ export const ROUTES: Route[] = [
     new Route(new RegExp("^#.*")).redirect("/library"),
     new Route(new RegExp("^/library$"), html`<ak-library></ak-library>`),
     new Route(new RegExp("^/administration/overview$"), html`<ak-admin-overview></ak-admin-overview>`),
+    new Route(new RegExp("^/administration/system-tasks$"), html`<ak-system-task-list></ak-system-task-list>`),
     new Route(new RegExp("^/providers$"), html`<ak-provider-list></ak-provider-list>`),
     new Route(new RegExp(`^/providers/(?<id>${ID_REGEX})$`)).then((args) => {
         return html`<ak-provider-view .providerID=${parseInt(args.id, 10)}></ak-provider-view>`;