diff --git a/src/App.js b/src/App.js
index c6f620eca6bac1e4eb2901a54e885b654f21c2b3..d5887f2806641157e1ebbbd696a565f241ec7bca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,15 +11,16 @@ class App extends React.Component {
super(props);
this.state = {
fetchFailed: false,
- suites: []
+ suites: [],
+ dashboard: null,
};
}
render() {
- const { fetchFailed, suites } = this.state;
+ const { fetchFailed, dashboard, suites } = this.state;
return (
<React.Fragment>
- <Header fetchFailed={fetchFailed} suites={suites}/>
+ <Header fetchFailed={fetchFailed} dashboard={dashboard}/>
<Body fetchFailed={fetchFailed} suites={suites}/>
</React.Fragment>
);
@@ -39,7 +40,26 @@ class App extends React.Component {
}
}
+ loadDashboard() {
+ const url = '/api/v0/dashboard';
+
+ fetch(url).then((response) => {
+ if (!response.ok) {
+ this.setState({fetchFailed: true});
+ throw new Error(response.statusText);
+ }
+ return response.json();
+ }).then((data) => {
+ this.setState({dashboard: data});
+ }).catch((error) => {
+ console.log(error);
+ this.setState({fetchFailed: true});
+ });
+ }
+
componentDidMount() {
+ this.loadDashboard()
+
const url = '/api/v0/pkgs/list';
fetch(url).then((response) => {
@@ -76,3 +96,5 @@ class App extends React.Component {
}
module.exports = {App};
+
+// vim: ts=2 sw=2 et:
diff --git a/src/Header.js b/src/Header.js
index 233d86b6fdaa074e8aed81986c38377ff62151ba..9a52179bc61af6ee35b88390bb4b094e37ba4a8c 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -6,38 +6,46 @@ import ArchLinuxNavbar from './navbar';
class Header extends React.Component {
calculateSuiteStats(data) {
- let good = 0;
- let bad = 0;
- let unknown = 0;
+ let good = data['good'];
+ let bad = data['bad'];
+ let unknown = data['unknown'];
- for (let pkg of data) {
- switch (pkg.status) {
- case 'GOOD':
- good++;
- break
- case 'BAD':
- bad++;
- break
- case 'UNKWN':
- unknown++;
- break
- }
- }
-
- const percentage = (good / data.length * 100).toFixed(1);
+ const percentage = (good / (good + bad + unknown) * 100).toFixed(1);
return {good, bad, unknown, percentage};
}
+ // TODO: this is duplciated code from App.js
+ compareSuites(a, b) {
+ if (a.name == 'core') {
+ return -1;
+ } else if (a.name == 'core' && b.name != 'core') {
+ return -1;
+ } else if (a.name == 'extra' && b.name == 'core') {
+ return 1;
+ } else if (a.name == 'extra' && b.name != 'core') {
+ return -1;
+ } else {
+ return 1;
+ }
+ }
+
render() {
- const {fetchFailed, suites } = this.props;
+ const {fetchFailed, dashboard, suites } = this.props;
+ const overall = {good: 0, unknown: 0, bad: 0};
const suitesStats = [];
- for (let suite of suites) {
- const {good, bad, unknown, percentage} = this.calculateSuiteStats(suite.pkgs);
- suitesStats.push({name: suite.name, good, bad, unknown, percentage});
+ if (dashboard) {
+ for (const [key, value] of Object.entries(dashboard.suites)) {
+ const {good, bad, unknown, percentage} = this.calculateSuiteStats(value);
+ overall['good'] += good;
+ overall['bad'] += bad;
+ overall['unknown'] += unknown;
+ suitesStats.push({name: key, good, bad, unknown, percentage});
+ }
+ suitesStats.sort(this.compareSuites);
}
- const {good, bad, unknown, percentage} = this.calculateSuiteStats(suites.flatMap(suite => suite.pkgs));
+ const {good, bad, unknown, percentage} = this.calculateSuiteStats(overall);
const overallStats = {name: 'overall', good, bad, unknown, percentage};
return (
@@ -50,10 +58,10 @@ class Header extends React.Component {
<p>For more information read the <a href="https://reproducible-builds.org/">Reproducible Builds website</a> or join the <a href="ircs://libera.chat/archlinux-reproducible">#archlinux-reproducible</a> IRC channel on <a href="https://libera.chat/">libera.chat</a>.</p>
<br/>
<ul className="repo-summary">
- {!fetchFailed && suites.length == 0 &&
+ {!fetchFailed && !dashboard &&
<p><b>Loading...</b></p>
}
- {!fetchFailed && suites.length > 0 &&
+ {!fetchFailed && dashboard &&
<li key="overall">Arch Linux is <span className="has-text-weight-bold">{ overallStats.percentage }%</span> reproducible with <span className="bad has-text-weight-bold">{ overallStats.bad } bad</span> <span className="unknown has-text-weight-bold">{ overallStats.unknown } unknown</span> and <span className="good has-text-weight-bold">{ overallStats.good } good</span> packages.</li>
}
{!fetchFailed && suitesStats.map(function(repo, index) {
@@ -68,3 +76,5 @@ class Header extends React.Component {
}
module.exports = {Header};
+
+// vim: ts=2 sw=2 et: