create components folder
This commit is contained in:
parent
0767ed90c0
commit
1b74c3da3f
10 changed files with 21 additions and 14 deletions
|
@ -3,8 +3,8 @@ import React, { Component } from 'react';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import Service from './Service.js';
|
import Service from './Service.js';
|
||||||
import ServicePlaceholder from './ServicePlaceholder.js';
|
import ServicePlaceholder from './ServicePlaceholder.js';
|
||||||
import OP from './ws/op.js';
|
import OP from '../ws/op.js';
|
||||||
import { log } from './util.js';
|
import { log } from '../util.js';
|
||||||
|
|
||||||
const DOMAIN = 'https://elstatus.stayathomeserver.club';
|
const DOMAIN = 'https://elstatus.stayathomeserver.club';
|
||||||
// const ENDPOINT = 'http://localhost:8069/api/status'
|
// const ENDPOINT = 'http://localhost:8069/api/status'
|
||||||
|
@ -106,7 +106,6 @@ export default class App extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const metrics = !this.state.metrics ? null : (
|
const metrics = !this.state.metrics ? null : (
|
||||||
<div className="services">
|
<div className="services">
|
||||||
|
@ -123,21 +122,23 @@ export default class App extends Component {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dashboard">
|
<div className="dashboard">
|
||||||
<h1>elstatus</h1>
|
<h1>elstatus</h1>
|
||||||
|
|
||||||
|
{this.state.error ? (
|
||||||
|
<div className="error">
|
||||||
|
Error: {this.state.error}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{this.state.loading ? (
|
{this.state.loading ? (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<ServicePlaceholder />
|
<ServicePlaceholder />
|
||||||
<ServicePlaceholder />
|
<ServicePlaceholder />
|
||||||
<ServicePlaceholder />
|
<ServicePlaceholder />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
) : null}
|
) : metrics}
|
||||||
{this.state.error ? (
|
|
||||||
<div>Error: {this.state.error}</div>
|
|
||||||
) : null}
|
|
||||||
{metrics}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
|
||||||
import Graph from './Graph.js';
|
|
||||||
import './Service.css';
|
import './Service.css';
|
||||||
|
import Graph from './Graph.js';
|
||||||
|
|
||||||
const Service = ({ graph, name, status, latency, description }) => (
|
const Service = ({ graph, name, status, latency, description }) => (
|
||||||
<div className="service">
|
<div className="service">
|
|
@ -2,6 +2,10 @@ html, body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
@ -12,6 +16,8 @@ h1:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *:before, *:after {
|
.error {
|
||||||
box-sizing: inherit;
|
background: pink;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.15rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import register from './icons.js';
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import App from './components/App';
|
||||||
|
import register from './icons.js';
|
||||||
|
|
||||||
register();
|
register();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue