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

Add empty state

pull/10616/head
Alex P 2017-05-23 12:13:11 -07:00
parent ea0766a21a
commit 89eee35126
1 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,8 +108,6 @@ const HostsTable = React.createClass({
hostsTitle = 'Loading Hosts...' hostsTitle = 'Loading Hosts...'
} else if (hostsError.length) { } else if (hostsError.length) {
hostsTitle = 'There was a problem loading hosts' hostsTitle = 'There was a problem loading hosts'
} else if (hosts.length === 0) {
hostsTitle = 'No hosts found'
} else if (hostCount === 1) { } else if (hostCount === 1) {
hostsTitle = `${hostCount} Host` hostsTitle = `${hostCount} Host`
} else { } else {
@ -123,45 +121,52 @@ const HostsTable = React.createClass({
<SearchBar onSearch={this.updateSearchTerm} /> <SearchBar onSearch={this.updateSearchTerm} />
</div> </div>
<div className="panel-body"> <div className="panel-body">
<table className="table v-center"> {hostCount > 0 && !hostsError.length
<thead> ? <table className="table v-center table-highlight">
<tr> <thead>
<th <tr>
onClick={() => this.updateSort('name')} <th
className={this.sortableClasses('name')} onClick={() => this.updateSort('name')}
> className={this.sortableClasses('name')}
Host >
</th> Host
<th </th>
onClick={() => this.updateSort('deltaUptime')} <th
className={this.sortableClasses('deltaUptime')} onClick={() => this.updateSort('deltaUptime')}
style={{width: '74px'}} className={this.sortableClasses('deltaUptime')}
> style={{width: '74px'}}
Status >
</th> Status
<th </th>
onClick={() => this.updateSort('cpu')} <th
className={this.sortableClasses('cpu')} onClick={() => this.updateSort('cpu')}
style={{width: '70px'}} className={this.sortableClasses('cpu')}
> style={{width: '70px'}}
CPU >
</th> CPU
<th </th>
onClick={() => this.updateSort('load')} <th
className={this.sortableClasses('load')} onClick={() => this.updateSort('load')}
style={{width: '68px'}} className={this.sortableClasses('load')}
> style={{width: '68px'}}
Load >
</th> Load
<th>Apps</th> </th>
</tr> <th>Apps</th>
</thead> </tr>
<tbody> </thead>
{sortedHosts.map(h => {
return <HostRow key={h.name} host={h} source={source} /> <tbody>
})} {sortedHosts.map(h => {
</tbody> return <HostRow key={h.name} host={h} source={source} />
</table> })}
</tbody>
</table>
: <div className="generic-empty-state">
<h4 style={{margin: '90px 0'}}>
No Hosts found
</h4>
</div>}
</div> </div>
</div> </div>
) )