Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Making hosts pages dark

pull/206/head
Alex P 2016-10-03 15:54:26 -07:00 committed by Andrew Watkins
parent 521d8fd6d9
commit 4eb3fcf935
3 changed files with 124 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/hosts/containers/HostPage.js
View File

@ -21,6 +21,7 @@ export const HostPage = React.createClass({
render() {
const autoRefreshMs = 15000;
const source = this.props.source.links.proxy;
const hostID = this.props.params.hostID;
const queries = [
{
text: `SELECT "usage_user" FROM "telegraf".."cpu" WHERE host = '${this.props.params.hostID}' AND time > now() - 15m`,
@ -49,29 +50,31 @@ export const HostPage = React.createClass({
];
return (
<div className="host">
<div className="enterprise-header">
<div className="host-dashboard hosts-page">
<div className="enterprise-header hosts-dashboard-header">
<div className="enterprise-header__container">
<div className="enterprise-header__left">
<h1>
Host - {this.props.params.hostID}
</h1>
<h1>{hostID}</h1>
</div>
<div className="enterprise-header__right">
<p>Uptime: <strong>2d 4h 33m</strong></p>
</div>
</div>
</div>
<div className="container-fluid">
<div className="container-fluid hosts-dashboard">
<div className="row">
{
queries.map((query) => {
const q = Object.assign({}, query, {host: source});
return (
<div className="col-md-4 graph-panel__graph-container" key={q.name}>
<h2>{q.name}</h2>
<RefreshingLineGraph
queries={[q]}
autoRefresh={autoRefreshMs}
/>
<div className="col-xs-12 col-sm-6 col-lg-4" key={q.name}>
<h2 className="hosts-graph-heading">{q.name}</h2>
<div className="hosts-graph graph-panel__graph-container">
<RefreshingLineGraph
queries={[q]}
autoRefresh={autoRefreshMs}
/>
</div>
</div>
);
})

2
ui/src/hosts/containers/HostsPage.js
View File

@ -51,7 +51,7 @@ export const HostsPage = React.createClass({
render() {
return (
<div className="hosts">
<div className="hosts hosts-page">
<div className="enterprise-header">
<div className="enterprise-header__container">
<div className="enterprise-header__left">

107
ui/src/style/enterprise_style/_enterprise-custom.scss
View File

@ -80,6 +80,15 @@ body > #react-root {
background-size: contain;
}
.page-wrapper > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/*
Enterprise Page Header
----------------------------------------------
@ -640,4 +649,102 @@ table .monotype {
&.dot-critical {
background-color: $c-fire;
}
}
/*
Hosts Dashboard
----------------------------------------------
*/
.hosts-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background: $g2-kevlar;
background: -moz-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
background: -webkit-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
background: linear-gradient(to bottom, $g2-kevlar 0%, $g0-obsidian 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g2-kevlar', endColorstr='$g0-obsidian',GradientType=0 );
color: $g17-whisper;
.enterprise-header {
background-color: $g0-obsidian;
}
.panel-minimal {
border: 0;
.panel-title {
color: $g17-whisper !important;
}
.panel-body {
padding: 30px;
background-color: $g3-castle;
border: 0;
color: $g17-whisper;
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
table {
th,td {
border-color: $g5-pepper;
}
th {
color: $g17-whisper;
}
td {
color: $g14-chromium;
}
}
}
}
.hosts-dashboard {
max-width: 100%;
// position: relative;
// flex-grow: 1;
// overflow: auto;
}
.graph-panel__graph-container.hosts-graph {
margin-bottom: 15px;
padding: 9.5px 16px;
}
.hosts-graph-heading {
display: block;
width: 100%;
margin: 15px 0 0 0;
background-color: $g5-pepper;
padding: 9.5px 16px;
font-weight: 500;
font-size: 16px;
color: $g14-chromium;
border-radius: 4px 4px 0 0;
}
.hosts-dashboard-header {
.enterprise-header__container {
max-width: 100%;
}
.enterprise-header__left {
flex-direction: row;
align-items: center;
> * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
.enterprise-header__right {
font-size: inherit;
}
}