49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import Service from './Service.js';
|
|
import './App.css';
|
|
|
|
const ENDPOINT = 'https://elstatus.stayathomeserver.club/api/status'
|
|
|
|
export default class App extends Component {
|
|
state = {
|
|
loading: true,
|
|
error: null,
|
|
metrics: null,
|
|
};
|
|
|
|
componentDidMount() {
|
|
fetch(ENDPOINT)
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
this.setState({ metrics: data, loading: false });
|
|
})
|
|
.catch((error) => {
|
|
this.setState({ error: error.toString() });
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const metrics = !this.state.metrics ? null : (
|
|
<div className="services">
|
|
{Object.entries(this.state.metrics.status)
|
|
.map(([name, info]) =>
|
|
<Service name={name} key={name}
|
|
graph={this.state.metrics.graph[name]}
|
|
{...info}
|
|
/>)
|
|
}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="dashboard">
|
|
<h1>elstatus</h1>
|
|
{this.state.loading ? <div>Loading metrics...</div> : null}
|
|
{this.state.error ? <div>Error: {this.state.error}</div> : null}
|
|
{metrics}
|
|
</div>
|
|
);
|
|
}
|
|
}
|