From 72293b3fcf681d22a805bc5b7fa80217d1c2d763 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 29 Nov 2016 15:24:38 -0800 Subject: [PATCH] All pages have new page classes - More consistent - More semantic - Might have missed a page or two, will circle back later --- ui/src/App.js | 12 ++- ui/src/alerts/containers/AlertsApp.js | 10 +-- ui/src/chronograf/containers/App.js | 2 +- ui/src/chronograf/containers/Header.js | 6 +- ui/src/hosts/containers/HostPage.js | 14 +-- ui/src/hosts/containers/HostsPage.js | 10 +-- ui/src/kapacitor/components/KapacitorRule.js | 4 +- ui/src/kapacitor/components/RuleHeader.js | 8 +- ui/src/kapacitor/containers/KapacitorPage.js | 89 ++++++++++--------- .../containers/KapacitorRulesPage.js | 10 +-- .../components/KubernetesDashboard.js | 14 +-- ui/src/sources/containers/ManageSources.js | 86 +++++++++--------- ui/src/sources/containers/SourceForm.js | 86 +++++++++--------- 13 files changed, 177 insertions(+), 174 deletions(-) diff --git a/ui/src/App.js b/ui/src/App.js index 8ea5dee8e..dfc50f707 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -50,14 +50,12 @@ const App = React.createClass({ const {sourceID, base64ExplorerID} = this.props.params; return ( -
+
-
- {this.renderNotifications()} - {this.props.children && React.cloneElement(this.props.children, { - addFlashMessage: this.handleNotification, - })} -
+ {this.renderNotifications()} + {this.props.children && React.cloneElement(this.props.children, { + addFlashMessage: this.handleNotification, + })}
); }, diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index ed336c911..7a3f3e9cb 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -96,17 +96,17 @@ const AlertsApp = React.createClass({ return ( // I stole this from the Hosts page. // Perhaps we should create an abstraction? -
-
-
-
+
+
+
+

Alert History

-
+
diff --git a/ui/src/chronograf/containers/App.js b/ui/src/chronograf/containers/App.js index 631424362..897b8f223 100644 --- a/ui/src/chronograf/containers/App.js +++ b/ui/src/chronograf/containers/App.js @@ -35,7 +35,7 @@ const App = React.createClass({ const {base64ExplorerID} = this.props.params; return ( -
+
); diff --git a/ui/src/chronograf/containers/Header.js b/ui/src/chronograf/containers/Header.js index f0558ea08..49085bffc 100644 --- a/ui/src/chronograf/containers/Header.js +++ b/ui/src/chronograf/containers/Header.js @@ -108,8 +108,8 @@ const Header = React.createClass({ {text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal}, ]; return ( -
-
+
+

Exploration:

New Exploration
-
+

Source:

diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index af6cd8fc1..f5342d8ad 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -97,20 +97,20 @@ export const HostPage = React.createClass({ const {layouts, timeRange} = this.state; return ( -
-
-
-
+
+
+
+

{hostID}

-
+

Range:

-
-
+
+
{ (layouts.length > 0) ? this.renderLayouts(layouts) : '' }
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 91170fe3e..a2a5bab7f 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -44,17 +44,17 @@ export const HostsPage = React.createClass({ render() { return ( -
-
-
-
+
+
+
+

Host List

-
+
diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index 24b65c75a..e922b46c2 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -30,14 +30,14 @@ export const KapacitorRule = React.createClass({ const {chooseTrigger, updateRuleValues} = kapacitorActions; return ( -
+
-
+
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js index c13125ae7..e9461b10b 100644 --- a/ui/src/kapacitor/components/RuleHeader.js +++ b/ui/src/kapacitor/components/RuleHeader.js @@ -44,12 +44,12 @@ export const RuleHeader = React.createClass({ render() { return ( -
-
-
+
+
+
{this.renderEditName()}
-
+
{this.renderSave()}
diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js index 39495e873..fc34a5162 100644 --- a/ui/src/kapacitor/containers/KapacitorPage.js +++ b/ui/src/kapacitor/containers/KapacitorPage.js @@ -117,61 +117,62 @@ export const KapacitorPage = React.createClass({ const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername; return ( -
-
-
-
+
+
+
+

Configure Kapacitor

+
+
+
+
+
+
+

+ 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. +

+
+

Connection Details

+
+
+
+
+ + this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}> +
+
+ + this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}> +
+
+ + this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}> +
+
+ + this.kapacitorPassword = r} className="form-control" id="password" type="password"> +
+
-
-
-
-
-
-

- 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. -

-
-

Connection Details

-
- -
-
- - this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}> +
+
-
- - this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}> -
-
- - this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}> -
-
- - this.kapacitorPassword = r} className="form-control" id="password" type="password"> -
-
- -
- -
- + +
-
-
-
- {this.renderAlertOutputs()} +
+
+ {this.renderAlertOutputs()} +
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js index ca92ddc3a..937f88566 100644 --- a/ui/src/kapacitor/containers/KapacitorRulesPage.js +++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js @@ -90,15 +90,15 @@ export const KapacitorRulesPage = React.createClass({ render() { return ( -
-
-
-
+
+
+
+

Kapacitor Rules

-
+
{this.renderSubComponent()}
diff --git a/ui/src/kubernetes/components/KubernetesDashboard.js b/ui/src/kubernetes/components/KubernetesDashboard.js index 813f8c477..e2f4d3ab4 100644 --- a/ui/src/kubernetes/components/KubernetesDashboard.js +++ b/ui/src/kubernetes/components/KubernetesDashboard.js @@ -66,20 +66,20 @@ export const KubernetesPage = React.createClass({ ); return ( -
-
-
-
+
+
+
+

Kubernetes Dashboard

-
+

Range:

-
-
+
+
{layouts.length ? this.renderLayouts(layouts) : emptyState}
diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index dcb6ae04b..a55536d53 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -64,53 +64,55 @@ export const ManageSources = React.createClass({ const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`; return ( -
-
-
-
+
+
+
+

InfluxDB Sources

-
-
-
+
+
+
+
-
-
-

{sourcesTitle}

- Add New Source -
-
-
- - - - - - - - - - - { - sources.map((source) => { - return ( - - - - - - - ); - }) - } - -
NameHostKapacitor
{source.name}{source.default ? Default : null}{source.url}{_.get(source, ['kapacitor', 'name'], '')} - Edit - Connect - -
+
+
+

{sourcesTitle}

+ Add New Source +
+
+
+ + + + + + + + + + + { + sources.map((source) => { + return ( + + + + + + + ); + }) + } + +
NameHostKapacitor
{source.name}{source.default ? Default : null}{source.url}{_.get(source, ['kapacitor', 'name'], '')} + Edit + Connect + +
+
diff --git a/ui/src/sources/containers/SourceForm.js b/ui/src/sources/containers/SourceForm.js index 3731bfafa..01e5dfc06 100644 --- a/ui/src/sources/containers/SourceForm.js +++ b/ui/src/sources/containers/SourceForm.js @@ -82,58 +82,60 @@ export const SourceForm = React.createClass({ } return ( -
-
-
-
+
+
+
+

{editMode ? "Edit Source" : "Add a New Source"}

-
-
-
-
-
-

Connection Details

-
+
+
+
+
+
+
+

Connection Details

+
-
-
-
- - this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={this.onInputChange} value={source.url || ''}> -
-
- - this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}> -
-
- - this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}> -
-
- - this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}> -
-
- - this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}> -
-
-
- this.sourceDefault = r} /> - + +
+
+ + this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={this.onInputChange} value={source.url || ''}> +
+
+ + this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}> +
+
+ + this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}> +
+
+ + this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}> +
+
+ + this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}> +
+
+
+ this.sourceDefault = r} /> + +
-
-
- -
- +
+ +
+ +