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

Refactor Hosts Page to use flexbox styles and Infinite Scroll.

pull/10616/head
Hunter Trujillo 2017-11-29 15:04:45 -07:00
parent 85ce7bba00
commit 94c864373d
5 changed files with 87 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/alerts/components/AlertsTable.js
View File

@ -49,7 +49,7 @@ class AlertsTable extends Component {
}
}
sortableClasses = key => () => {
sortableClasses = key => {
if (this.state.sortKey === key) {
if (this.state.sortDirection === 'asc') {
return 'alert-history-table--th sortable-header sorting-ascending'

24
ui/src/hosts/components/HostRow.js
View File

@ -20,13 +20,13 @@ class HostRow extends Component {
const {colName, colStatus, colCPU, colLoad} = HOSTS_TABLE
return (
<tr>
<td style={{width: colName}}>
<div className="hosts-table--tr">
<div className="hosts-table--td" style={{width: colName}}>
<Link to={`/sources/${source.id}/hosts/${name}`}>
{name}
</Link>
</td>
<td style={{width: colStatus}}>
</div>
<div className="hosts-table--td" style={{width: colStatus}}>
<div
className={classnames(
'table-dot',
@ -35,14 +35,14 @@ class HostRow extends Component {
: 'dot-critical'
)}
/>
</td>
<td style={{width: colCPU}} className="monotype">
</div>
<div style={{width: colCPU}} className="monotype hosts-table--td">
{isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`}
</td>
<td style={{width: colLoad}} className="monotype">
</div>
<div style={{width: colLoad}} className="monotype hosts-table--td">
{isNaN(load) ? 'N/A' : `${load.toFixed(2)}`}
</td>
<td>
</div>
<div className="hosts-table--td">
{apps.map((app, index) => {
return (
<span key={app}>
@ -59,8 +59,8 @@ class HostRow extends Component {
</span>
)
})}
</td>
</tr>
</div>
</div>
)
}
}

46
ui/src/hosts/components/HostsTable.js
View File

@ -3,6 +3,7 @@ import _ from 'lodash'
import SearchBar from 'src/hosts/components/SearchBar'
import HostRow from 'src/hosts/components/HostRow'
import InfiniteScroll from 'shared/components/InfiniteScroll'
import {HOSTS_TABLE} from 'src/hosts/constants/tableSizing'
@ -67,11 +68,11 @@ class HostsTable extends Component {
sortableClasses = key => {
if (this.state.sortKey === key) {
if (this.state.sortDirection === 'asc') {
return 'sortable-header sorting-ascending'
return 'hosts-table--th sortable-header sorting-ascending'
}
return 'sortable-header sorting-descending'
return 'hosts-table--th sortable-header sorting-descending'
}
return 'sortable-header'
return 'hosts-table--th sortable-header'
}
render() {
@ -110,47 +111,48 @@ class HostsTable extends Component {
</div>
<div className="panel-body">
{hostCount > 0 && !hostsError.length
? <table className="table v-center table-highlight">
<thead>
<tr>
<th
? <div className="hosts-table">
<div className="hosts-table--thead">
<div className="hosts-table--tr">
<div
onClick={this.updateSort('name')}
className={this.sortableClasses('name')}
style={{width: colName}}
>
Host
</th>
<th
</div>
<div
onClick={this.updateSort('deltaUptime')}
className={this.sortableClasses('deltaUptime')}
style={{width: colStatus}}
>
Status
</th>
<th
</div>
<div
onClick={this.updateSort('cpu')}
className={this.sortableClasses('cpu')}
style={{width: colCPU}}
>
CPU
</th>
<th
</div>
<div
onClick={this.updateSort('load')}
className={this.sortableClasses('load')}
style={{width: colLoad}}
>
Load
</th>
<th>Apps</th>
</tr>
</thead>
<tbody>
{sortedHosts.map(h =>
</div>
<div className="hosts-table--th">Apps</div>
</div>
</div>
<InfiniteScroll
items={sortedHosts.map(h =>
<HostRow key={h.name} host={h} source={source} />
)}
</tbody>
</table>
itemHeight={26}
className="hosts-table--tbody"
/>
</div>
: <div className="generic-empty-state">
<h4 style={{margin: '90px 0'}}>No Hosts found</h4>
</div>}

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

@ -2,7 +2,6 @@ import React, {PropTypes, Component} from 'react'
import _ from 'lodash'
import HostsTable from 'src/hosts/components/HostsTable'
import FancyScrollbar from 'shared/components/FancyScrollbar'
import SourceIndicator from 'shared/components/SourceIndicator'
import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis'
@ -66,7 +65,7 @@ class HostsPage extends Component {
const {source} = this.props
const {hosts, hostsLoading, hostsError} = this.state
return (
<div className="page">
<div className="page hosts-list-page">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
@ -77,7 +76,7 @@ class HostsPage extends Component {
</div>
</div>
</div>
<FancyScrollbar className="page-contents">
<div className="page-contents">
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
@ -90,7 +89,7 @@ class HostsPage extends Component {
</div>
</div>
</div>
</FancyScrollbar>
</div>
</div>
)
}

48
ui/src/style/components/tables.scss
View File

@ -178,7 +178,8 @@ $table-tab-scrollbar-height: 6px;
Alert History "Page"
----------------------------------------------
*/
.alert-history-page {
.alert-history-page,
.hosts-list-page {
.page-contents > .container-fluid,
.page-contents > .container-fluid > .row,
.page-contents > .container-fluid > .row > .col-md-12,
@ -272,3 +273,48 @@ table .table-cell-nowrap {
overflow: hidden;
text-overflow: ellipsis;
}
/*
Hosts "Table"
----------------------------------------------
*/
.hosts-table {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.hosts-table--thead {
display: flex;
width: 100%;
border-bottom: 2px solid $g5-pepper;
}
.hosts-table--th {
@include no-user-select();
padding: 8px;
font-size: 13px;
font-weight: 500;
color: $g17-whisper;
}
.hosts-table--tbody {
flex: 1 0 0;
width: 100%;
}
.hosts-table--tr {
display: flex;
width: 100%;
&:hover {
background-color: $g4-onyx;
}
}
.hosts-table--td {
font-size: 12px;
font-family: $code-font;
font-weight: 500;
padding: 4px 8px;
line-height: 1.42857143em;
color: $g13-mist;
white-space: pre-wrap;
word-break: break-all;
}