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

Merge pull request #698 from influxdata/misc-ui-polish 

Misc UI Polish
pull/10616/head
Alex Paxton 2016-12-16 10:42:32 -08:00 committed by GitHub
parent 9e71c7c8cb 5206430971
commit 487809b668
13 changed files with 88 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,7 @@ const AlertsTable = React.createClass({
return (
<tr key={`${name}-${time}-${host}-${value}`}>
<td className="monotype">{name}</td>
<td className="monotype">{level}</td>
<td className={`monotype alert-level-${level.toLowerCase()}`}>{level}</td>
<td className="monotype">{(new Date(Number(time)).toISOString())}</td>
<td className="monotype">{host}</td>
<td className="monotype">{value}</td>

16
ui/src/kapacitor/components/DataSection.js
View File

@ -104,8 +104,8 @@ export const DataSection = React.createClass({
<div className="kapacitor-rule-section">
<h3 className="rule-section-heading">Select a Time Series</h3>
<div className="rule-section-body">
<div className="query-editor kapacitor-metric-selector">
<div className="query-editor__code">
<div className="qeditor kapacitor-metric-selector">
<div className="qeditor--query-preview">
<pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
</div>
{this.renderEditor()}
@ -131,11 +131,11 @@ export const DataSection = React.createClass({
return (
<div className="kapacitor-tab-list">
<div className="query-editor__tabs">
<div onClick={_.wrap(DB_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === DB_TAB})}>Databases</div>
<div onClick={_.wrap(MEASUREMENTS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === MEASUREMENTS_TAB})}>Measurements</div>
<div onClick={_.wrap(FIELDS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === FIELDS_TAB})}>Fields</div>
<div onClick={_.wrap(TAGS_TAB, this.handleClickTab)} className={classNames("query-editor__tab", {active: activeTab === TAGS_TAB})}>Tags</div>
<div className="qeditor--tabs">
<div onClick={_.wrap(DB_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === DB_TAB})}>Databases</div>
<div onClick={_.wrap(MEASUREMENTS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === MEASUREMENTS_TAB})}>Measurements</div>
<div onClick={_.wrap(FIELDS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === FIELDS_TAB})}>Fields</div>
<div onClick={_.wrap(TAGS_TAB, this.handleClickTab)} className={classNames("qeditor--tab", {active: activeTab === TAGS_TAB})}>Tags</div>
</div>
{this.renderList()}
</div>
@ -180,7 +180,7 @@ export const DataSection = React.createClass({
/>
);
default:
return <ul className="query-editor__list"></ul>;
return <ul className="qeditor--list"></ul>;
}
},
});

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

@ -1,6 +1,9 @@
import React, {PropTypes} from 'react';
import {getKapacitor, getKapacitorConfigSection, createKapacitor, updateKapacitor, pingKapacitor} from 'shared/apis';
import AlertOutputs from '../components/AlertOutputs';
// default values for name & url
const defaultKapacitorName = "My Kapacitor";
const defaultKapacitorUrl = "http://localhost:9092";
export const KapacitorPage = React.createClass({
propTypes: {
@ -109,6 +112,14 @@ export const KapacitorPage = React.createClass({
this.setState({newUsername: this.kapacitorUser.value});
},
handleResetToDefaults(e) {
e.preventDefault();
this.setState({
newURL: defaultKapacitorUrl,
newName: defaultKapacitorName,
});
},
render() {
const {kapacitor, newName, newURL, newUsername} = this.state;
// if the fields in state are defined, use them. otherwise use the defaults
@ -116,6 +127,7 @@ export const KapacitorPage = React.createClass({
const url = newURL === undefined ? kapacitor && kapacitor.url || '' : newURL;
const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername;
return (
<div className="page">
<div className="page-header">
@ -145,11 +157,11 @@ export const KapacitorPage = React.createClass({
<div>
<div className="form-group col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-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>
<input ref={(r) => this.kapacitorURL = r} className="form-control" id="connect-string" placeholder={defaultKapacitorUrl} value={url} onChange={this.updateURL}></input>
</div>
<div className="form-group col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0">
<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>
<input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder={defaultKapacitorName} value={name} onChange={this.updateName}></input>
</div>
<div className="form-group col-xs-12 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2">
<label htmlFor="username">Username</label>
@ -161,8 +173,9 @@ export const KapacitorPage = React.createClass({
</div>
</div>
<div className="form-group form-group-submit col-xs-4 col-xs-offset-4">
<button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
<div className="form-group form-group-submit col-xs-12 text-center">
<button className="btn btn-info" onClick={this.handleResetToDefaults}>Reset to Default</button>
<button className="btn btn-success" type="submit">Connect Kapacitor</button>
</div>
</form>
</div>
@ -189,7 +202,9 @@ export const KapacitorPage = React.createClass({
return (
<div className="panel panel-minimal">
<div className="panel-body">
<p>Set your Kapacitor connection info to configure alerting endpoints.</p>
<h4 className="text-center">Configure Alert Endpoints</h4>
<br/>
<p className="text-center">Set your Kapacitor connection info to configure alerting endpoints.</p>
</div>
</div>
);

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

@ -129,7 +129,7 @@ export const KapacitorRulesPage = React.createClass({
<td className="monotype">{rule.trigger}</td>
<td className="monotype">{rule.message}</td>
<td className="monotype">{rule.alerts.join(', ')}</td>
<td><button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteRule(rule)}>Delete</button></td>
<td className="text-right"><button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteRule(rule)}>Delete</button></td>
</tr>
);
});

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

@ -95,8 +95,8 @@ export const ManageSources = React.createClass({
return (
<tr key={source.id}>
<td>{source.name}{source.default ? <span className="default-source-label">Default</span> : null}</td>
<td>{source.url}</td>
<td>{kapacitorName}</td>
<td className="monotype">{source.url}</td>
<td>{kapacitorName ? kapacitorName : "--"}</td>
<td className="text-right">
<Link className="btn btn-info btn-xs" to={`${pathname}/${source.id}/edit`}><span className="icon pencil"></span></Link>
<Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>

18
ui/src/style/chronograf/components/_Header.scss
View File

@ -1,3 +1,5 @@
$sessions-dropdown-width: 227px;
.sessions-dropdown {
margin: 0 0 0 4px;
@ -5,6 +7,19 @@
width: 227px;
border-radius: 3px 0 0 3px;
}
.dropdown-selected {
display: inline-block;
width: ($sessions-dropdown-width - 28px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li.dropdown-item > a {
width: ($sessions-dropdown-width - 48px); // 48 is width of 2 actions
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.sessions-dropdown__btn {
margin: 0 16px 0 0;
@ -21,6 +36,9 @@
font-size: 12px;
border-radius: 3px;
margin-right: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
> .icon {
display: inline-block;

11
ui/src/style/chronograf/components/_Panel.scss
View File

@ -13,13 +13,12 @@
// For when an panel item is open
&.active {
background-color: $g4-onyx;
.panel__header {
&-name {
color: $g20-white;
.panel--name {
color: $g20-white;
.icon {
transform: translateY(-50%) rotate(90deg);
}
.icon {
transform: translateY(-50%) rotate(90deg);
}
}
}

5
ui/src/style/chronograf/components/_PanelBuilder.scss
View File

@ -4,7 +4,10 @@
background: $g1-raven;
padding: $explorer-page-padding;
@include gradient-v($g2-kevlar,$g0-obsidian);
@include custom-scrollbar($g2-kevlar,$c-pool);
&::-webkit-scrollbar {
display: none;
}
> .btn {
margin-bottom: 6px;

1
ui/src/style/chronograf/main.scss
View File

@ -6,7 +6,6 @@
@import 'components/PanelBuilder';
@import 'components/Panel';
@import 'components/MultiSelectDropdown';
@import 'components/GroupByTimeDropdown';
@import 'components/TagList';
@import 'components/Resizer';
@import 'components/Header';

9
ui/src/style/enterprise_style/alerts.scss Normal file
View File

@ -0,0 +1,9 @@
.alert-level-critical {
color: $c-dreamsicle !important;
}
.alert-level-warning {
color: #fdcf30 !important;
}
.alert-level-ok {
color: $c-rainforest !important;
}

2
ui/src/style/enterprise_style/application.scss
View File

@ -11,12 +11,14 @@
@import 'retention-policies';
@import 'signup';
@import 'enterprise-custom';
@import 'groupByTimeDropdown';
@import 'flash-messages';
@import 'dygraph-override';
@import 'auth-page';
@import 'hosts';
@import 'kapacitor';
@import 'influx-tooltips';
@import 'alerts';
// Because of some issues with sharing styles across multiple webpack bundles,
// we have to import other scss files here instead of in their corresponding

0
ui/src/style/chronograf/components/_GroupByTimeDropdown.scss → ui/src/style/enterprise_style/groupByTimeDropdown.scss
View File

38
ui/src/style/enterprise_style/kapacitor.scss
View File

@ -158,33 +158,30 @@ $kapacitor-font-sm: 13px;
div.query-editor.kapacitor-metric-selector {
div.qeditor.kapacitor-metric-selector {
border-radius: 0;
background-color: transparent;
padding: 0;
// Query sample
.query-editor__code pre {
.qeditor--query-preview pre {
font-size: $kapacitor-font-sm;
white-space: pre-wrap;
background-color: $kapacitor-graphic-color;
color: $kapacitor-accent;
border-radius: $kap-radius-lg $kap-radius-lg 0 0;
border: 0;
margin: 0;
padding: $kap-padding-md $kap-padding-lg;
code {
line-height: 1.5em;
}
@include custom-scrollbar($kapacitor-graphic-color, $kapacitor-accent);
}
// Tabs
.query-editor__tabs {
.qeditor--tabs {
background-color: $kapacitor-graphic-color;
padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg;
border-top: 2px solid $kapacitor-divider-color;
}
.query-editor__tab {
.qeditor--tab {
font-size: $kapacitor-font-sm;
background-color: $g3-castle;
font-weight: 700;
@ -223,20 +220,21 @@ div.query-editor.kapacitor-metric-selector {
background-color: $kapacitor-graphic-color;
border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
}
.query-editor__list {
.qeditor--list {
overflow: auto;
padding-top: $kap-padding-sm;
background-color: transparent;
min-height: $metric-selector-height;
max-height: $metric-selector-height;
height: $metric-selector-height;
max-height: ($metric-selector-height * 2);
// height: $metric-selector-height;
border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
@include custom-scrollbar($kapacitor-graphic-color,$kapacitor-accent);
}
.query-editor__list-header {
.qeditor--list-header {
background-color: transparent;
padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg;
}
.query-editor__filter,
.qeditor--filter,
.tag-value-list__filter {
border-radius: 4px;
padding-left: ($kap-input-height + ($kap-padding-sm / 2));
@ -265,7 +263,7 @@ div.query-editor.kapacitor-metric-selector {
top: 50%;
}
}
.query-editor__list-item {
.qeditor--list-item {
font-size: $kapacitor-font-sm;
font-weight: 600;
padding-left: $kap-padding-lg;
@ -282,12 +280,12 @@ div.query-editor.kapacitor-metric-selector {
color: $kapacitor-accent;
}
}
.query-editor__hidden-dropdown {
.qeditor--hidden-dropdown {
.btn.dropdown-toggle {
width: 260px;
}
}
.query-editor__list-checkbox__checkbox {
.qeditor--list-checkbox__checkbox {
&:before {
background-color: $kapacitor-accent;
}
@ -302,7 +300,7 @@ div.query-editor.kapacitor-metric-selector {
.tag-value-list__checkbox:after {
background-color: $kapacitor-accent;
}
.tag-value-list__item.query-editor__list-item.active {
.tag-value-list__item.qeditor--list-item.active {
background-color: transparent;
}
.btn.tag-list__group-by.active {
@ -339,7 +337,7 @@ div.query-editor.kapacitor-metric-selector {
}
// Empty State
.query-editor__empty {
.qeditor--empty {
background-color: $kapacitor-graphic-color;
height: $metric-selector-height;
min-height: $metric-selector-height;
@ -546,7 +544,7 @@ div.query-editor.kapacitor-metric-selector {
}
.dropdown-toggle,
.dropdown.group-by-time-dropdown .btn.dropdown-toggle,
.query-editor__list-checkbox .dropdown .btn.dropdown-toggle {
.qeditor--list-checkbox .dropdown .btn.dropdown-toggle {
width: 100%;
text-align: left;
position: relative;