From e21d9b1ccc152294c3ef7167e7e1c7b2562ba75f Mon Sep 17 00:00:00 2001 From: Ricardo Marques Date: Mon, 19 Mar 2018 15:06:51 +0000 Subject: [PATCH] mgr/dashboard: Asynchronous tasks front-end Signed-off-by: Ricardo Marques --- src/pybind/mgr/dashboard/HACKING.rst | 67 ++++++++++++++++ .../app/core/navigation/navigation.module.ts | 3 +- .../navigation/navigation.component.html | 4 +- .../navigation/navigation.component.spec.ts | 10 ++- .../notifications.component.spec.ts | 2 +- .../task-manager/task-manager.component.html | 77 +++++++++++++++++++ .../task-manager/task-manager.component.scss | 1 + .../task-manager.component.spec.ts | 34 ++++++++ .../task-manager/task-manager.component.ts | 48 ++++++++++++ .../src/app/shared/models/executing-task.ts | 6 ++ .../src/app/shared/models/finished-task.ts | 14 ++++ .../src/app/shared/models/task-exception.ts | 6 ++ .../frontend/src/app/shared/models/task.ts | 6 ++ .../services/auth-interceptor.service.ts | 20 +++-- .../services/notification.service.spec.ts | 10 ++- .../shared/services/notification.service.ts | 16 +++- .../app/shared/services/services.module.ts | 12 ++- .../services/task-manager-message.service.ts | 51 ++++++++++++ .../shared/services/task-manager.service.ts | 59 ++++++++++++++ 19 files changed, 431 insertions(+), 15 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/models/executing-task.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/models/finished-task.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/models/task-exception.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/models/task.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-manager-message.service.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-manager.service.ts diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst index b17c17b2deeb5..a5084f2dd2e06 100644 --- a/src/pybind/mgr/dashboard/HACKING.rst +++ b/src/pybind/mgr/dashboard/HACKING.rst @@ -838,3 +838,70 @@ updates its progress: task = TaskManager.run("dummy/task", {}, self._dummy) return task.wait(5) # wait for five seconds + +How to deal with asynchronous tasks in the front-end? +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +All executing and most recently finished asynchronous tasks are displayed on the +"Backgroud-Tasks" menu. + +The front-end developer should provide a description, success message and error +messages for each task on ``TaskManagerMessageService.messages``. +This messages can make use of the task metadata to provide more personalized messages. + +When submitting an asynchronous task, the developer should provide a callback +that will be automatically triggered after the execution of that task. +This can be done by using the ``TaskManagerService.subscribe``. + +Most of the times, all we want to do after a task completes the execution, is +displaying a notification message based on the execution result. The +``NotificationService.notifyTask`` will use the messages from +``TaskManagerMessageService`` to display a success / error message based on the +execution result of a task. + +Usage example: + +.. code-block:: javascript + + export class TaskManagerMessageService { + + messages = { + // Messages for 'rbd/create' task + 'rbd/create': new TaskManagerMessage( + // Description + (metadata) => `Create RBD '${metadata.pool_name}/${metadata.image_name}'`, + // Success message + (metadata) => `RBD '${metadata.pool_name}/${metadata.image_name}' + have been created successfully`, + // Error messages + (metadata) => { + return { + '17': `Name '${metadata.pool_name}/${metadata.image_name}' is already + in use.` + }; + } + ), + // ... + }; + + // ... + } + + export class RBDFormComponent { + // ... + + submit() { + // ... + this.rbdService.create(request).then((resp) => { + // Subscribe the submitted task + this.taskManagerService.subscribe('rbd/create', + {'pool_name': request.pool_name, 'rbd_name': request.name}, + // Callback that will be invoked after task is finished + (finishedTask: FinishedTask) => { + // Will display a notification message (success or error) + this.notificationService.notifyTask(finishedTask, finishedTask.ret_value.success); + }); + // ... + }) + } + } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts index 6c11b05fd07d0..6965506256b67 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts @@ -10,6 +10,7 @@ import { SharedModule } from '../../shared/shared.module'; import { AuthModule } from '../auth/auth.module'; import { NavigationComponent } from './navigation/navigation.component'; import { NotificationsComponent } from './notifications/notifications.component'; +import { TaskManagerComponent } from './task-manager/task-manager.component'; @NgModule({ imports: [ @@ -21,7 +22,7 @@ import { NotificationsComponent } from './notifications/notifications.component' SharedModule, RouterModule ], - declarations: [NavigationComponent, NotificationsComponent], + declarations: [NavigationComponent, NotificationsComponent, TaskManagerComponent], exports: [NavigationComponent] }) export class NavigationModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html index a00e7cef6fe57..99bf8380912ca 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html @@ -218,10 +218,12 @@