NextERP/runbot
5
0
Fork 0
mirror of https://github.com/odoo/runbot.git synced 2025-03-27 13:25:47 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

[IMP] runbot: move loading state above chart

Browse Source 
Instead of having the spinner in the configuration section, display it
as an overlay over the chart.
This commit is contained in:
William Braeckman 2025-01-10 09:35:16 +01:00
parent 255ceeb0e4
commit cd70f5f0c1
5 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
runbot/static/src/stats/stats.scss
View File

@ -32,3 +32,7 @@
padding: 0; padding: 0;
} }
} }
.o_runbot_stat_chart_backdrop {
backdrop-filter: blur(2px);
}

6
runbot/static/src/stats/stats_chart.js
View File

@ -20,6 +20,7 @@ export class StatsChart extends Component {
this.config = useConfig(); this.config = useConfig();
this.canvas = useRef('canvas'); this.canvas = useRef('canvas');
this.state = useState({ this.state = useState({
loading: false,
data: {}, data: {},
}); });
this.chartConfig = useState({ this.chartConfig = useState({
@ -84,8 +85,7 @@ export class StatsChart extends Component {
* on the debounced _fetchStat. * on the debounced _fetchStat.
*/ */
fetchStats() { fetchStats() {
this.loading = true; this.state.loading = true;
this.env.bus.trigger('start-loading', {});
this._fetchStats(); // debounced this._fetchStats(); // debounced
} }
@ -106,7 +106,7 @@ export class StatsChart extends Component {
}, },
}); });
this.state.data = (await result.json()).result; this.state.data = (await result.json()).result;
this.env.bus.trigger('stop-loading', {}); this.state.loading = false;
} }
/** /**

9
runbot/static/src/stats/stats_chart.xml
View File

@ -2,7 +2,14 @@
<odoo> <odoo>
<t t-name="runbot.StatsChart"> <t t-name="runbot.StatsChart">
<div class="row"> <div class="row">
<div class="col-xs-9 col-md-10"><canvas t-ref="canvas"/></div> <div class="col-xs-9 col-md-10">
<div class="position-relative">
<div t-if="state.loading" class="o_runbot_stat_chart_backdrop position-absolute h-100 w-100 text-center align-content-center">
<i class="fa fa-2x fa-circle-o-notch fa-spin"/>
</div>
<canvas t-ref="canvas"/>
</div>
</div>
<div class="col-xs-3 col-md-2"> <div class="col-xs-3 col-md-2">
<b>Mode:</b> <b>Mode:</b>
<select class="form-select" aria-label="Display Mode" t-model="config.mode"> <select class="form-select" aria-label="Display Mode" t-model="config.mode">

6
runbot/static/src/stats/stats_config.js
View File

@ -41,13 +41,7 @@ export class StatsConfig extends Component {
}; };
setup() { setup() {
this.state = useState({
loading: true,
})
this.config = useConfig(); this.config = useConfig();
useBus(this.env.bus, 'start-loading', () => this.state.loading = true);
useBus(this.env.bus, 'stop-loading', () => this.state.loading = false);
} }
onClickPrevious() { onClickPrevious() {

1
runbot/static/src/stats/stats_config.xml
View File

@ -34,7 +34,6 @@
<i t-attf-class="fa fa-fast-forward"/> <i t-attf-class="fa fa-fast-forward"/>
</button> </button>
<p>Tips: click a bullet to see corresponding build stats, shift+click to center the graph on this build</p> <p>Tips: click a bullet to see corresponding build stats, shift+click to center the graph on this build</p>
<i t-if="state.loading" class="fa fa-2x fa-circle-o-notch fa-spin"/>
</div> </div>
</nav> </nav>
</t> </t>