From 4eaf55dc5814a0d91e853e9b7e6745367c226c53 Mon Sep 17 00:00:00 2001 From: William Braeckman Date: Fri, 10 Jan 2025 10:15:22 +0100 Subject: [PATCH] [REF] runbot: rewrite stat page layout Rewrite the page layout to have good separation within components. --- runbot/static/src/stats/stats_chart.js | 29 +++++++-- runbot/static/src/stats/stats_chart.xml | 75 ++++++++++++++++-------- runbot/static/src/stats/stats_config.js | 11 +--- runbot/static/src/stats/stats_config.xml | 67 +++++++++++---------- runbot/static/src/stats/stats_root.js | 7 +-- runbot/static/src/stats/use_bus.js | 22 ------- runbot/static/src/stats/use_config.js | 4 +- 7 files changed, 112 insertions(+), 103 deletions(-) delete mode 100644 runbot/static/src/stats/use_bus.js diff --git a/runbot/static/src/stats/stats_chart.js b/runbot/static/src/stats/stats_chart.js index 481285d8f..7b37553d7 100644 --- a/runbot/static/src/stats/stats_chart.js +++ b/runbot/static/src/stats/stats_chart.js @@ -3,7 +3,6 @@ import { Component, useEffect, useRef, useState } from '@odoo/owl'; import { debounce, filterKeys, randomColor } from '@runbot/utils'; -import { useBus } from '@runbot/stats/use_bus'; import { useConfig, onConfigChange } from '@runbot/stats/use_config'; import { Chart } from '@runbot/chartjs'; @@ -70,8 +69,6 @@ export class StatsChart extends Component { }); onConfigChange(() => this.fetchStats(), true); - useBus(this.env.bus, 'click-previous', () => this.selectPrevious()); - useBus(this.env.bus, 'click-next', () => this.selectNext()); useEffect(() => { this.updateChart(); }, () => [ @@ -80,6 +77,28 @@ export class StatsChart extends Component { ]); } + /** + * Whether to display the next button + */ + get shouldDisplayNext() { + const builds = Object.keys(this.state.data); + if (!builds.length) { + return false; + } + return this.config.center_build_id !== '0' && this.config.center_build_id !== builds[builds.length - 1]; + } + + /** + * Whether to display the previous button + */ + get shouldDisplayPrevious() { + const builds = Object.keys(this.state.data); + if (!builds.length) { + return false; + } + return this.config.center_build_id !== builds[0]; + } + /** * Called before actually fetching stat, this triggers the spinner while waiting * on the debounced _fetchStat. @@ -281,7 +300,7 @@ export class StatsChart extends Component { /** * Selects the first build as the center build for the next fetch. */ - selectPrevious() { + onClickPrevious() { const builds = Object.keys(this.state.data); if (!builds || !builds.length) { return @@ -292,7 +311,7 @@ export class StatsChart extends Component { /** * Selects the last build as the center build for the next fetch. */ - selectNext() { + onClickNext() { const builds = Object.keys(this.state.data); if (!builds || !builds.length) { return diff --git a/runbot/static/src/stats/stats_chart.xml b/runbot/static/src/stats/stats_chart.xml index 65ecc8948..cba6c03a9 100644 --- a/runbot/static/src/stats/stats_chart.xml +++ b/runbot/static/src/stats/stats_chart.xml @@ -1,9 +1,59 @@ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ Tips: click a bullet to see corresponding build stats, shift+click to center the graph on this build +
+
+
+
+
-
+
@@ -11,29 +61,6 @@
- Mode: - -
- Display: - -
- Display aggregate: -
    diff --git a/runbot/static/src/stats/stats_config.js b/runbot/static/src/stats/stats_config.js index e85ca6fd6..bbe2d70ed 100644 --- a/runbot/static/src/stats/stats_config.js +++ b/runbot/static/src/stats/stats_config.js @@ -1,8 +1,7 @@ /** @odoo-module **/ -import { Component, useState } from '@odoo/owl'; +import { Component } from '@odoo/owl'; -import { useBus } from '@runbot/stats/use_bus'; import { useConfig } from '@runbot/stats/use_config'; @@ -44,14 +43,6 @@ export class StatsConfig extends Component { this.config = useConfig(); } - onClickPrevious() { - this.env.bus.trigger('click-previous', {}); - } - - onClickNext() { - this.env.bus.trigger('click-next', {}); - } - /** * Called when the trigger selection is changed. * This changes the config to remove trigger specific keys and redirects diff --git a/runbot/static/src/stats/stats_config.xml b/runbot/static/src/stats/stats_config.xml index 277c9ad2c..555799e80 100644 --- a/runbot/static/src/stats/stats_config.xml +++ b/runbot/static/src/stats/stats_config.xml @@ -1,40 +1,39 @@ - +
diff --git a/runbot/static/src/stats/stats_root.js b/runbot/static/src/stats/stats_root.js index 35b683aa5..6fb28ebe8 100644 --- a/runbot/static/src/stats/stats_root.js +++ b/runbot/static/src/stats/stats_root.js @@ -1,6 +1,6 @@ /** @odoo-module **/ -import { Component, whenReady, App, EventBus, useSubEnv } from '@odoo/owl'; +import { Component, whenReady, App } from '@odoo/owl'; import { getTemplate } from '@web/core/templates'; import { StatsConfig } from '@runbot/stats/stats_config'; @@ -47,11 +47,6 @@ export class StatsRoot extends Component { setup() { // Initialize shared configuration for children components. useConfig(false); - - // Bus for communicating between children - useSubEnv({ - bus: new EventBus(), - }); } } diff --git a/runbot/static/src/stats/use_bus.js b/runbot/static/src/stats/use_bus.js deleted file mode 100644 index 5402754ae..000000000 --- a/runbot/static/src/stats/use_bus.js +++ /dev/null @@ -1,22 +0,0 @@ -/** @odoo-module **/ - -import { useComponent, useEffect } from '@odoo/owl'; - -/** - * Ensures a bus event listener is attached and cleared the proper way. - * - * @param {import("@odoo/owl").EventBus} bus - * @param {string} eventName - * @param {EventListener} callback - */ -export function useBus(bus, eventName, callback) { - const component = useComponent(); - useEffect( - () => { - const listener = callback.bind(component); - bus.addEventListener(eventName, listener); - return () => bus.removeEventListener(eventName, listener); - }, - () => [], - ); -} diff --git a/runbot/static/src/stats/use_config.js b/runbot/static/src/stats/use_config.js index 54be708c1..3abeaf6c9 100644 --- a/runbot/static/src/stats/use_config.js +++ b/runbot/static/src/stats/use_config.js @@ -8,7 +8,7 @@ import { reactive, useEffect, useState, useEnv, useSubEnv } from '@odoo/owl'; */ export class Config { constructor({ - limit = 25, center_build_id = 0, key_category = 'module_loading_queries', + limit = 25, center_build_id = '0', key_category = 'module_loading_queries', mode = 'normal', nb_dataset = 20, display_aggregate = 'none', visible_keys = '', }) { this.limit = limit; @@ -27,7 +27,7 @@ export class Config { */ static fromSearchParams() { const config = Object.fromEntries(new URLSearchParams(window.location.hash.substring(1))); - const numberKeys = ['limit', 'center_build_id', 'nb_dataset']; + const numberKeys = ['limit', 'nb_dataset']; numberKeys.forEach((key) => { if (!(key in config)) { return;