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

All pages have new page classes 

- More consistent
- More semantic
- Might have missed a page or two, will circle back later
pull/634/head
Alex P 2016-11-29 15:24:38 -08:00
parent c99cf1dbb1
commit 72293b3fcf
13 changed files with 177 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/App.js
View File

@ -50,14 +50,12 @@ const App = React.createClass({
const {sourceID, base64ExplorerID} = this.props.params; const {sourceID, base64ExplorerID} = this.props.params;
return ( return (
<div className="chronograf-wrapper--flex"> <div className="chronograf-root">
<SideNavContainer sourceID={sourceID} explorationID={base64ExplorerID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} /> <SideNavContainer sourceID={sourceID} explorationID={base64ExplorerID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
<div className="page-wrapper"> {this.renderNotifications()}
{this.renderNotifications()} {this.props.children && React.cloneElement(this.props.children, {
{this.props.children && React.cloneElement(this.props.children, { addFlashMessage: this.handleNotification,
addFlashMessage: this.handleNotification, })}
})}
</div>
</div> </div>
); );
}, },

10
ui/src/alerts/containers/AlertsApp.js
View File

@ -96,17 +96,17 @@ const AlertsApp = React.createClass({
return ( return (
// I stole this from the Hosts page. // I stole this from the Hosts page.
// Perhaps we should create an abstraction? // Perhaps we should create an abstraction?
<div className="hosts hosts-page"> <div className="page">
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1> <h1>
Alert History Alert History
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
<div className="hosts-page-scroll-container"> <div className="page-contents">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-md-12"> <div className="col-md-12">

2
ui/src/chronograf/containers/App.js
View File

@ -35,7 +35,7 @@ const App = React.createClass({
const {base64ExplorerID} = this.props.params; const {base64ExplorerID} = this.props.params;
return ( return (
<div className="data-explorer-container"> <div className="page">
<DataExplorer source={this.props.source} explorerID={this.decodeID(base64ExplorerID)} /> <DataExplorer source={this.props.source} explorerID={this.decodeID(base64ExplorerID)} />
</div> </div>
); );

6
ui/src/chronograf/containers/Header.js
View File

@ -108,8 +108,8 @@ const Header = React.createClass({
{text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal}, {text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal},
]; ];
return ( return (
<div className="chronograf-header data-explorer__header"> <div className="page-header data-explorer__header">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1 className="dropdown-title">Exploration:</h1> <h1 className="dropdown-title">Exploration:</h1>
<Dropdown <Dropdown
className="sessions-dropdown" className="sessions-dropdown"
@ -120,7 +120,7 @@ const Header = React.createClass({
/> />
<div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div> <div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div>
</div> </div>
<div className="chronograf-header__right"> <div className="page-header__right">
<h1>Source:</h1> <h1>Source:</h1>
<div className="source-indicator"> <div className="source-indicator">
<span className="icon cpu"></span> <span className="icon cpu"></span>

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

@ -97,20 +97,20 @@ export const HostPage = React.createClass({
const {layouts, timeRange} = this.state; const {layouts, timeRange} = this.state;
return ( return (
<div className="host-dashboard hosts-page"> <div className="page">
<div className="chronograf-header hosts-dashboard-header"> <div className="page-header full-width">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1>{hostID}</h1> <h1>{hostID}</h1>
</div> </div>
<div className="chronograf-header__right"> <div className="page-header__right">
<h1>Range:</h1> <h1>Range:</h1>
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} /> <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
</div> </div>
</div> </div>
</div> </div>
<div className="hosts-page-scroll-container"> <div className="page-contents">
<div className="container-fluid hosts-dashboard"> <div className="container-fluid full-width">
{ (layouts.length > 0) ? this.renderLayouts(layouts) : '' } { (layouts.length > 0) ? this.renderLayouts(layouts) : '' }
</div> </div>
</div> </div>

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

@ -44,17 +44,17 @@ export const HostsPage = React.createClass({
render() { render() {
return ( return (
<div className="hosts hosts-page"> <div className="page">
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1> <h1>
Host List Host List
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
<div className="hosts-page-scroll-container"> <div className="page-contents">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-md-12"> <div className="col-md-12">

4
ui/src/kapacitor/components/KapacitorRule.js
View File

@ -30,14 +30,14 @@ export const KapacitorRule = React.createClass({
const {chooseTrigger, updateRuleValues} = kapacitorActions; const {chooseTrigger, updateRuleValues} = kapacitorActions;
return ( return (
<div className="kapacitor-rule-page"> <div className="page">
<RuleHeader <RuleHeader
rule={rule} rule={rule}
actions={kapacitorActions} actions={kapacitorActions}
onSave={isEditing ? this.handleEdit : this.handleCreate} onSave={isEditing ? this.handleEdit : this.handleCreate}
validationError={this.validationError()} validationError={this.validationError()}
/> />
<div className="rule-builder-wrapper"> <div className="page-contents">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-xs-12"> <div className="col-xs-12">

8
ui/src/kapacitor/components/RuleHeader.js
View File

@ -44,12 +44,12 @@ export const RuleHeader = React.createClass({
render() { render() {
return ( return (
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
{this.renderEditName()} {this.renderEditName()}
</div> </div>
<div className="chronograf-header__right"> <div className="page-header__right">
{this.renderSave()} {this.renderSave()}
</div> </div>
</div> </div>

89
ui/src/kapacitor/containers/KapacitorPage.js
View File

@ -117,61 +117,62 @@ export const KapacitorPage = React.createClass({
const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername; const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername;
return ( return (
<div className="kapacitor"> <div className="page">
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1> <h1>
Configure Kapacitor Configure Kapacitor
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
<div className="page-contents">
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-minimal">
<div className="panel-body">
<p>
Kapacitor is used as the monitoring and alerting agent.
This page will let you configure which Kapacitor to use and
set up alert end points like email, Slack, and others.
</p>
<hr/>
<h4 className="text-center">Connection Details</h4>
<br/>
<form onSubmit={this.handleKapacitorUpdate}>
<div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<label htmlFor="connect-string">Connection String</label>
<input ref={(r) => this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}></input>
</div>
<div className="form-group col-xs-6 col-sm-4">
<label htmlFor="name">Name</label>
<input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}></input>
</div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<label htmlFor="username">Username</label>
<input ref={(r) => this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}></input>
</div>
<div className="form-group col-xs-6 col-sm-4">
<label htmlFor="password">Password</label>
<input ref={(r) => this.kapacitorPassword = r} className="form-control" id="password" type="password"></input>
</div>
</div>
<div className="container-fluid"> <div className="form-group col-xs-4 col-xs-offset-4">
<div className="row"> <button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-minimal">
<div className="panel-body">
<p>
Kapacitor is used as the monitoring and alerting agent.
This page will let you configure which Kapacitor to use and
set up alert end points like email, Slack, and others.
</p>
<hr/>
<h4 className="text-center">Connection Details</h4>
<br/>
<form onSubmit={this.handleKapacitorUpdate}>
<div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<label htmlFor="connect-string">Connection String</label>
<input ref={(r) => this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}></input>
</div> </div>
<div className="form-group col-xs-6 col-sm-4"> </form>
<label htmlFor="name">Name</label> </div>
<input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}></input>
</div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<label htmlFor="username">Username</label>
<input ref={(r) => this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}></input>
</div>
<div className="form-group col-xs-6 col-sm-4">
<label htmlFor="password">Password</label>
<input ref={(r) => this.kapacitorPassword = r} className="form-control" id="password" type="password"></input>
</div>
</div>
<div className="form-group col-xs-4 col-xs-offset-4">
<button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-md-8 col-md-offset-2">
<div className="col-md-8 col-md-offset-2"> {this.renderAlertOutputs()}
{this.renderAlertOutputs()} </div>
</div> </div>
</div> </div>
</div> </div>

10
ui/src/kapacitor/containers/KapacitorRulesPage.js
View File

@ -90,15 +90,15 @@ export const KapacitorRulesPage = React.createClass({
render() { render() {
return ( return (
<div className="kapacitor-rules-page"> <div className="page">
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1>Kapacitor Rules</h1> <h1>Kapacitor Rules</h1>
</div> </div>
</div> </div>
</div> </div>
<div className="hosts-page-scroll-container"> <div className="page-contents">
<div className="container-fluid"> <div className="container-fluid">
{this.renderSubComponent()} {this.renderSubComponent()}
</div> </div>

14
ui/src/kubernetes/components/KubernetesDashboard.js
View File

@ -66,20 +66,20 @@ export const KubernetesPage = React.createClass({
); );
return ( return (
<div className="host-dashboard hosts-page"> <div className="page">
<div className="chronograf-header hosts-dashboard-header"> <div className="page-header full-width">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1>Kubernetes Dashboard</h1> <h1>Kubernetes Dashboard</h1>
</div> </div>
<div className="chronograf-header__right"> <div className="page-header__right">
<h1>Range:</h1> <h1>Range:</h1>
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} /> <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
</div> </div>
</div> </div>
</div> </div>
<div className="hosts-page-scroll-container"> <div className="page-contents">
<div className="container-fluid hosts-dashboard"> <div className="container-fluid full-width">
{layouts.length ? this.renderLayouts(layouts) : emptyState} {layouts.length ? this.renderLayouts(layouts) : emptyState}
</div> </div>
</div> </div>

86
ui/src/sources/containers/ManageSources.js
View File

@ -64,53 +64,55 @@ export const ManageSources = React.createClass({
const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`; const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`;
return ( return (
<div id="manage-sources-page"> <div className="page" id="manage-sources-page">
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1>InfluxDB Sources</h1> <h1>InfluxDB Sources</h1>
</div> </div>
</div> </div>
</div> </div>
<div className="container-fluid"> <div className="page-contents">
<div className="row"> <div className="container-fluid">
<div className="col-md-12"> <div className="row">
<div className="col-md-12">
<div className="panel panel-minimal"> <div className="panel panel-minimal">
<div className="panel-heading u-flex u-ai-center u-jc-space-between"> <div className="panel-heading u-flex u-ai-center u-jc-space-between">
<h2 className="panel-title">{sourcesTitle}</h2> <h2 className="panel-title">{sourcesTitle}</h2>
<Link to={`/sources/${this.props.source.id}/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link> <Link to={`/sources/${this.props.source.id}/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link>
</div> </div>
<div className="panel-body"> <div className="panel-body">
<div className="table-responsive margin-bottom-zero"> <div className="table-responsive margin-bottom-zero">
<table className="table v-center margin-bottom-zero"> <table className="table v-center margin-bottom-zero">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Host</th> <th>Host</th>
<th>Kapacitor</th> <th>Kapacitor</th>
<th className="text-right"></th> <th className="text-right"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{ {
sources.map((source) => { sources.map((source) => {
return ( return (
<tr key={source.id}> <tr key={source.id}>
<td>{source.name}{source.default ? <span className="label label-primary">Default</span> : null}</td> <td>{source.name}{source.default ? <span className="label label-primary">Default</span> : null}</td>
<td>{source.url}</td> <td>{source.url}</td>
<td>{_.get(source, ['kapacitor', 'name'], '')}</td> <td>{_.get(source, ['kapacitor', 'name'], '')}</td>
<td className="text-right"> <td className="text-right">
<Link className="btn btn-default btn-xs" to={`${pathname}/${source.id}/edit`}>Edit</Link> <Link className="btn btn-default btn-xs" to={`${pathname}/${source.id}/edit`}>Edit</Link>
<Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link> <Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>
<button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}>Delete</button> <button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}>Delete</button>
</td> </td>
</tr> </tr>
); );
}) })
} }
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>

86
ui/src/sources/containers/SourceForm.js
View File

@ -82,58 +82,60 @@ export const SourceForm = React.createClass({
} }
return ( return (
<div id="source-form-page"> <div className="page" id="source-form-page">
<div className="chronograf-header"> <div className="page-header">
<div className="chronograf-header__container"> <div className="page-header__container">
<div className="chronograf-header__left"> <div className="page-header__left">
<h1> <h1>
{editMode ? "Edit Source" : "Add a New Source"} {editMode ? "Edit Source" : "Add a New Source"}
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
<div className="container-fluid"> <div className="page-contents">
<div className="row"> <div className="container-fluid">
<div className="col-md-8 col-md-offset-2"> <div className="row">
<div className="panel panel-summer"> <div className="col-md-8 col-md-offset-2">
<div className="panel-body"> <div className="panel panel-summer">
<h4 className="text-center">Connection Details</h4> <div className="panel-body">
<br/> <h4 className="text-center">Connection Details</h4>
<br/>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<div> <div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2"> <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<label htmlFor="connect-string">Connection String</label> <label htmlFor="connect-string">Connection String</label>
<input type="text" name="url" ref={(r) => this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={this.onInputChange} value={source.url || ''}></input> <input type="text" name="url" ref={(r) => this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={this.onInputChange} value={source.url || ''}></input>
</div> </div>
<div className="form-group col-xs-6 col-sm-4"> <div className="form-group col-xs-6 col-sm-4">
<label htmlFor="name">Name</label> <label htmlFor="name">Name</label>
<input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}></input> <input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}></input>
</div> </div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2"> <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}></input> <input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}></input>
</div> </div>
<div className="form-group col-xs-6 col-sm-4"> <div className="form-group col-xs-6 col-sm-4">
<label htmlFor="password">Password</label> <label htmlFor="password">Password</label>
<input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}></input> <input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}></input>
</div> </div>
<div className="form-group col-xs-8 col-xs-offset-2"> <div className="form-group col-xs-8 col-xs-offset-2">
<label htmlFor="telegraf">Telegraf database</label> <label htmlFor="telegraf">Telegraf database</label>
<input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}></input> <input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}></input>
</div> </div>
<div className="form-group col-xs-8 col-xs-offset-2"> <div className="form-group col-xs-8 col-xs-offset-2">
<div className="form-control-static"> <div className="form-control-static">
<input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} /> <input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
<label htmlFor="defaultSourceCheckbox">Make this the default source</label> <label htmlFor="defaultSourceCheckbox">Make this the default source</label>
</div>
</div> </div>
</div> </div>
</div>
<div className="form-group col-xs-4 col-xs-offset-4"> <div className="form-group col-xs-4 col-xs-offset-4">
<button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button> <button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>
</div> </div>