ashie
/
elstat
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

de-bem service comp

This commit is contained in:
slice 2018-07-13 18:49:45 -07:00
parent f45918a218
commit 9569763e52
No known key found for this signature in database
GPG Key ID: 1508C19D7436A26D
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
priv/frontend/src/Service.css
View File

@ -1,22 +1,22 @@
.service__header { .service header {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.service__title__latency { .service header h2 {
margin: 0;
}
.service .latency {
margin-left: 0.5em; margin-left: 0.5em;
color: hsl(0, 0%, 45%); color: hsl(0, 0%, 45%);
} }
.service__header h2 { .service .emoji {
margin: 0;
}
.service__header__emoji {
font-size: 2em; font-size: 2em;
margin-right: 0.5em; margin-right: 0.5em;
} }
.service__description { .service .description {
margin: 1em 0 0 0; margin-top: 1em;
} }

10
priv/frontend/src/Service.js
View File

@ -5,19 +5,19 @@ import './Service.css';
const Service = ({ graph, name, status, latency, description }) => ( const Service = ({ graph, name, status, latency, description }) => (
<div className="service"> <div className="service">
<header className="service__header"> <header>
<div className="service__header__emoji"> <div className="emoji">
{status ? '✅' : '🚫'} {status ? '✅' : '🚫'}
</div> </div>
<h2 className="service__title"> <h2 className="title">
{name} {latency ? ( {name} {latency ? (
<span className="service__title__latency"> <span className="latency">
{latency}ms {latency}ms
</span> </span>
) : null} ) : null}
</h2> </h2>
</header> </header>
<p className="service__description"> <p className="description">
{description} {description}
</p> </p>
{graph ? <Graph width={500} height={175} data={graph} /> : null} {graph ? <Graph width={500} height={175} data={graph} /> : null}