[11.0] Add a "progress" system #18296
There are no files selected for viewing
|
There was a problem hiding this comment. I still think this whole file should be avoided. 3rd party UI components like bootstrap's dropdown or modals are configured only using html's data attribute and IMO we should be able to do the same here as it make them much more convenient to use. There was a problem hiding this comment. We have a Maybe the error message display could be mutualize, we will see when we will use this component in other contexts. There was a problem hiding this comment.
The buttons are already identified by some unique identifier like
I agree that there may be rare edge cases where it will be needed to have some custom code. But we should still be able to provide something simple to use for the common cases (I suppose most progress bar will either display something or redirect the user once they are finished) through data attributes. Taking the boostrap example once again, they have data attribute for common cases and emit some events so that specific behavior can be implemented by adding listeners.
I think this should be handled by using the appropriate HTML elements. For example, the install progress display a The massive actions would instead use a There was a problem hiding this comment. I am not against mutualizing code. It is something we could try to achieve when we will use the progress bar system in massive actions. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * --------------------------------------------------------------------- | ||
| * | ||
| * GLPI - Gestionnaire Libre de Parc Informatique | ||
| * | ||
| * http://glpi-project.org | ||
| * | ||
| * @copyright 2015-2024 Teclib' and contributors. | ||
| * @licence https://www.gnu.org/licenses/gpl-3.0.html | ||
| * | ||
| * --------------------------------------------------------------------- | ||
| * | ||
| * LICENSE | ||
| * | ||
| * This file is part of GLPI. | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU General Public License as published by | ||
| * the Free Software Foundation, either version 3 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU General Public License | ||
| * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
| * | ||
| * --------------------------------------------------------------------- | ||
| */ | ||
|
|
||
| import { ProgressBar } from './ProgressBar.js'; | ||
|
|
||
| export async function init_database(progress_key) | ||
| { | ||
| function message(message_list_element, text) { | ||
| const alert = document.createElement('div'); | ||
| alert.setAttribute('class', 'alert alert-important alert-danger my-2 mx-4'); | ||
| alert.setAttribute('role', 'alert'); | ||
| alert.innerHTML = ` | ||
| <i class="fas fa-2x fa-exclamation-triangle align-middle"></i> | ||
| ${text} | ||
| `; | ||
| message_list_element.appendChild(alert); | ||
| } | ||
|
|
||
| const messages_container = document.getElementById('glpi_install_messages_container'); | ||
| const success_container = document.getElementById('glpi_install_success'); | ||
| const back_button_container = document.getElementById('glpi_install_back'); | ||
|
|
||
| const message_list_element = document.createElement('div'); | ||
|
|
||
| const progress = new ProgressBar({ | ||
| key: progress_key, | ||
| container: messages_container, | ||
| success_callback: () => { | ||
| success_container.querySelector('button[type="submit"]').removeAttribute('disabled'); | ||
| success_container.setAttribute('class', 'd-inline'); | ||
| }, | ||
| error_callback: (msg) => { | ||
| back_button_container.querySelector('button[type="submit"]').removeAttribute('disabled'); | ||
| back_button_container.setAttribute('class', 'd-inline'); | ||
| message(message_list_element, msg); | ||
| }, | ||
| }); | ||
|
|
||
| progress.init(); | ||
|
|
||
| messages_container.appendChild(message_list_element); | ||
|
|
||
| setTimeout(() => { | ||
| progress.start(); | ||
| }, 1500); | ||
|
|
||
| try { | ||
| await fetch(`${CFG_GLPI.root_doc}/install/init_database`, {method: 'POST'}); | ||
| } catch { | ||
| // DB installation is really long and can result in a `Proxy timeout` error. | ||
| // It does not mean that the process is killed, it just mean that the proxy did not wait for the response | ||
| // and send an error to the client. | ||
| // Here we catch any error to make it silent, but we will handle it with the ProgressBar error_callback. | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is is alright to load the full
Progressdirectory here ?SessionProgressis not a service, shouldn't loading it in the dependency injection trigger an error as its constructor expect some parameters ?