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>
    );
  }
}