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

Merge pull request #634 from influxdata/all-dark-ui 

All Dark UI
pull/10616/head
Nathan Haugo 2016-12-01 14:35:38 -05:00 committed by GitHub
parent a26844fa51 6cc430d4ed
commit fa6d987d4a
40 changed files with 934 additions and 1264 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;
return (
<div className="chronograf-wrapper--flex">
<div className="chronograf-root">
<SideNavContainer sourceID={sourceID} explorationID={base64ExplorerID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
<div className="page-wrapper">
{this.renderNotifications()}
{this.props.children && React.cloneElement(this.props.children, {
addFlashMessage: this.handleNotification,
})}
</div>
{this.renderNotifications()}
{this.props.children && React.cloneElement(this.props.children, {
addFlashMessage: this.handleNotification,
})}
</div>
);
},

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

@ -116,7 +116,7 @@ const SearchBar = React.createClass({
<input
type="text"
className="form-control"
placeholder="Filter Alerts"
placeholder="Filter Alerts by Name..."
ref="searchInput"
onChange={this.handleChange}
/>

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

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

2
ui/src/chronograf/components/RenamePanelModal.js
View File

@ -40,7 +40,7 @@ const RenamePanelModal = React.createClass({
</div>
</div>
<div className="modal-footer">
<button className="btn btn-default" data-dismiss="modal">Cancel</button>
<button className="btn btn-info" data-dismiss="modal">Cancel</button>
<button onClick={this.handleConfirm} className="btn btn-success">Rename</button>
</div>
</div>

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

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

14
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},
];
return (
<div className="chronograf-header data-explorer__header">
<div className="chronograf-header__left">
<div className="page-header data-explorer__header">
<div className="page-header__left">
<h1 className="dropdown-title">Exploration:</h1>
<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>
<div className="chronograf-header__right">
<div className="page-header__right">
<h1>Source:</h1>
<div className="source-indicator">
<span className="icon cpu"></span>
@ -128,10 +128,6 @@ const Header = React.createClass({
</div>
<h1>Range:</h1>
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
{/* Placeholder for export functionality
<a href="#" className="btn btn-sm btn-info">Export</a> */}
{/* Placeholder for create graph functionality
<a href="#" className="btn btn-sm btn-primary"><span className="icon graphline"></span>&nbsp;&nbsp;Create Graph</a> */}
</div>
<DeleteExplorerModal onConfirm={this.confirmDeleteExplorer} />
<EditExplorerModal onConfirm={this.confirmEditExplorer} />
@ -157,7 +153,7 @@ const DeleteExplorerModal = React.createClass({
<h4 className="modal-title">Are you sure?</h4>
</div>
<div className="modal-footer">
<button className="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button className="btn btn-info" type="button" data-dismiss="modal">Cancel</button>
<button onClick={this.handleConfirm} className="btn btn-danger" type="button" data-dismiss="modal">Confirm</button>
</div>
</div>
@ -203,7 +199,7 @@ const EditExplorerModal = React.createClass({
</div>
</div>
<div className="modal-footer">
<button className="btn btn-default" onClick={this.handleCancel}>Cancel</button>
<button className="btn btn-info" onClick={this.handleCancel}>Cancel</button>
<input type="submit" value="Rename" className="btn btn-success" />
</div>
</form>

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

@ -81,10 +81,19 @@ const HostsTable = React.createClass({
const hostCount = hosts.length;
const {source} = this.props;
let hostsTitle;
if (hostCount === 1) {
hostsTitle = `${hostCount} Host`;
} else if (hostCount > 1) {
hostsTitle = `${hostCount} Hosts`;
} else {
hostsTitle = `Loading Hosts...`;
}
return (
<div className="panel panel-minimal">
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
<h2 className="panel-title">{hostCount ? `${hostCount} Hosts` : ''}</h2>
<h2 className="panel-title">{hostsTitle}</h2>
<SearchBar onSearch={_.wrap(this.props.hosts, this.filterHosts)} />
</div>
<div className="panel-body">
@ -148,7 +157,7 @@ const SearchBar = React.createClass({
<input
type="text"
className="form-control"
placeholder="Filter Hosts"
placeholder="Filter by Hostname..."
ref="searchInput"
onChange={this.handleChange}
/>

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

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

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

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

17
ui/src/kapacitor/components/AlertOutputs.js
View File

@ -101,12 +101,12 @@ const AlertOutputs = React.createClass({
}
return (
<div className="panel-body">
<h4 className="text-center">Alert Endpoints</h4>
<br/>
<div>
<div className="panel panel-minimal">
<div className="panel-body">
<h4 className="text-center">Configure Alert Endpoints</h4>
<br/>
<div className="row">
<div className="form-group col-xs-7 col-sm-5 col-sm-offset-2">
<div className="form-group col-xs-12 col-sm-8 col-sm-offset-2">
<label htmlFor="alert-endpoint" className="sr-only">Alert Enpoint</label>
<select value={this.state.selectedEndpoint} className="form-control" id="source" onChange={this.changeSelectedEndpoint}>
<option value="hipchat">HipChat</option>
@ -120,7 +120,12 @@ const AlertOutputs = React.createClass({
</div>
</div>
<div className="row">
{this.renderAlertConfig(selectedEndpoint)}
<div className="col-xs-12 col-sm-8 col-sm-offset-2">
<hr/>
</div>
<div className="col-xs-12 col-sm-8 col-sm-offset-2">
{this.renderAlertConfig(selectedEndpoint)}
</div>
</div>
</div>
</div>

2
ui/src/kapacitor/components/AlertaConfig.js
View File

@ -30,7 +30,7 @@ const AlertaConfig = React.createClass({
const {environment, origin, token, url} = this.props.config.options;
return (
<div className="panel-body">
<div className="col-xs-12 col-sm-8 col-sm-offset-2">
<h4 className="text-center">Alerta Alert</h4>
<br/>
<form onSubmit={this.handleSaveAlert}>

68
ui/src/kapacitor/components/HipChatConfig.js
View File

@ -34,58 +34,44 @@ const HipchatConfig = React.createClass({
const {url, global, room, token} = options;
return (
<div className="panel-body">
<div>
<h4 className="text-center">HipChat Alert</h4>
<br/>
<p>Have alerts sent to HipChat.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
Have alerts sent to HipChat
</p>
<div className="form-group col-xs-12">
<label htmlFor="url">HipChat URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group">
<label htmlFor="url">HipChat URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group col-xs-12">
<label htmlFor="room">Room</label>
<input className="form-control" id="room" type="text" ref={(r) => this.room = r} defaultValue={room || ''}></input>
</div>
<div className="form-group">
<label htmlFor="room">Room</label>
<input className="form-control" id="room" type="text" ref={(r) => this.room = r} defaultValue={room || ''}></input>
</div>
<div className="form-group col-xs-12">
<label htmlFor="token">Token</label>
<input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
<label className="form-helper">Note: a value of <code>true</code> indicates the HipChat token has been set</label>
</div>
<div className="form-group">
<label htmlFor="token">Token</label>
<input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
<span>Note: a value of <code>true</code> indicates the HipChat token has been set</span>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
Send all alerts without marking them explicitly in TICKscript
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
Send alerts on state change only
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="sendAllAlertsWithoutMarking" type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
<label htmlFor="sendAllAlertsWithoutMarking">Send all alerts without marking them explicitly in TICKscript</label>
</div>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="stateChangesOnly" type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
<label htmlFor="stateChangesOnly">Send alerts on state change only</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</form>
</div>
);

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

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

47
ui/src/kapacitor/components/PagerDutyConfig.js
View File

@ -30,44 +30,31 @@ const PagerDutyConfig = React.createClass({
const serviceKey = options['service-key'];
return (
<div className="panel-body">
<div>
<h4 className="text-center">PagerDuty Alert</h4>
<br/>
<p>You can have alerts sent to PagerDuty by entering info below.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
You can have alerts sent to PagerDuty by entering info below.
</p>
<div className="form-group col-xs-12">
<label htmlFor="service-key">Service Key</label>
<input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
<label className="form-helper">Note: a value of <code>true</code> indicates the PagerDuty service key has been set</label>
</div>
<div className="form-group">
<label htmlFor="service-key">Service Key</label>
<input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
<span>Note: a value of <code>true</code> indicates the PagerDuty service key has been set</span>
</div>
<div className="form-group">
<label htmlFor="url">PagerDuty URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
Send all alerts without marking them explicitly in TICKscript
</label>
</div>
</div>
<div className="form-group col-xs-12">
<label htmlFor="url">PagerDuty URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="sendAllAlertsWithoutMarking" type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
<label htmlFor="sendAllAlertsWithoutMarking">Send all alerts without marking them explicitly in TICKscript</label>
</div>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</form>
</div>

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

@ -44,12 +44,12 @@ export const RuleHeader = React.createClass({
render() {
return (
<div className="chronograf-header">
<div className="chronograf-header__container">
<div className="chronograf-header__left">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
{this.renderEditName()}
</div>
<div className="chronograf-header__right">
<div className="page-header__right">
{this.renderSave()}
</div>
</div>
@ -80,6 +80,7 @@ export const RuleHeader = React.createClass({
return (
<h1 className="chronograf-header__editable" onClick={this.toggleEditName} data-for="rename-kapacitor-tooltip" data-tip="Click to Rename">
{rule.name}
<span className="icon pencil"></span>
<ReactTooltip id="rename-kapacitor-tooltip" delayShow="200" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip kapacitor-tooltip place-bottom" />
</h1>
);

2
ui/src/kapacitor/components/RuleMessage.js
View File

@ -52,7 +52,7 @@ export const RuleMessage = React.createClass({
</div>
<div className="rule-section--item bottom alert-message--endpoint">
<p>Send this Alert to:</p>
<Dropdown className="size-256" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
<Dropdown className="size-256 dropdown-kapacitor" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
</div>
</div>
</div>

64
ui/src/kapacitor/components/SMTPConfig.js
View File

@ -32,48 +32,38 @@ const SMTPConfig = React.createClass({
const {host, port, from, username, password} = this.props.config.options;
return (
<div className="panel-body">
<div>
<h4 className="text-center">SMTP Alert</h4>
<br/>
<p>You can have alerts sent to an email address by setting up an SMTP endpoint.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
You can have alerts sent to an email address by setting up an SMTP endpoint.
</p>
<div className="form-group">
<label htmlFor="smtp-host">SMTP Host</label>
<input className="form-control" id="smtp-host" type="text" ref={(r) => this.host = r} defaultValue={host || ''}></input>
</div>
<div className="form-group">
<label htmlFor="smtp-port">SMTP Port</label>
<input className="form-control" id="smtp-port" type="text" ref={(r) => this.port = r} defaultValue={port || ''}></input>
</div>
<div className="form-group">
<label htmlFor="smtp-from">From email</label>
<input className="form-control" id="smtp-from" type="text" ref={(r) => this.from = r} defaultValue={from || ''}></input>
</div>
<div className="form-group">
<label htmlFor="smtp-user">User</label>
<input className="form-control" id="smtp-user" type="text" ref={(r) => this.username = r} defaultValue={username || ''}></input>
</div>
<div className="form-group">
<label htmlFor="smtp-password">Password</label>
<input className="form-control" id="smtp-password" type="password" ref={(r) => this.password = r} defaultValue={`${password}`}></input>
</div>
</div>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="smtp-host">SMTP Host</label>
<input className="form-control" id="smtp-host" type="text" ref={(r) => this.host = r} defaultValue={host || ''}></input>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="smtp-port">SMTP Port</label>
<input className="form-control" id="smtp-port" type="text" ref={(r) => this.port = r} defaultValue={port || ''}></input>
</div>
<div className="form-group col-xs-12">
<label htmlFor="smtp-from">From Email</label>
<input className="form-control" id="smtp-from" placeholder="email@domain.com" type="text" ref={(r) => this.from = r} defaultValue={from || ''}></input>
</div>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="smtp-user">User</label>
<input className="form-control" id="smtp-user" type="text" ref={(r) => this.username = r} defaultValue={username || ''}></input>
</div>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="smtp-password">Password</label>
<input className="form-control" id="smtp-password" type="password" ref={(r) => this.password = r} defaultValue={`${password}`}></input>
</div>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</form>
</div>

34
ui/src/kapacitor/components/SensuConfig.js
View File

@ -26,33 +26,23 @@ const SensuConfig = React.createClass({
const {source, addr} = this.props.config.options;
return (
<div className="panel-body">
<div>
<h4 className="text-center">Sensu Alert</h4>
<br/>
<p>Have alerts sent to Sensu.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
Have alerts sent to Sensu
</p>
<div className="form-group">
<label htmlFor="source">Source</label>
<input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
</div>
<div className="form-group">
<label htmlFor="address">Address</label>
<input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
</div>
</div>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="source">Source</label>
<input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
<div className="form-group col-xs-12 col-md-6">
<label htmlFor="address">Address</label>
<input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
</div>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</form>
</div>

40
ui/src/kapacitor/components/SlackConfig.js
View File

@ -47,39 +47,25 @@ const SlackConfig = React.createClass({
const {url, channel} = this.props.config.options;
return (
<div className="panel-body">
<div>
<h4 className="text-center">Slack Alert</h4>
<br/>
<p>Post alerts to a Slack channel.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
Post alerts to a Slack channel.
</p>
<div className="form-group">
<label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>
<input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
<span>Note: a value of <code>true</code> indicates that the Slack channel has been set</span>
</div>
<div className="form-group">
<label htmlFor="slack-channel">Slack Channel (optional)</label>
<input className="form-control" id="slack-channel" type="text" placeholder="#alerts" ref={(r) => this.channel = r} defaultValue={channel || ''}></input>
</div>
</div>
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
<div className="form-group col-xs-12">
<label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>
<input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
<label className="form-helper">Note: a value of <code>true</code> indicates that the Slack channel has been set</label>
</div>
<hr />
<div className="form-group col-xs-12">
<label htmlFor="slack-channel">Slack Channel (optional)</label>
<input className="form-control" id="slack-channel" type="text" placeholder="#alerts" ref={(r) => this.channel = r} defaultValue={channel || ''}></input>
</div>
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<a className="btn btn-warning" onClick={this.handleTest} disabled={!this.state.testEnabled}>Send Test Message</a>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<a className="btn btn-warning" onClick={this.handleTest} disabled={!this.state.testEnabled}>Send Test Message</a>
<button className="btn btn-primary" type="submit">Save</button>
</div>
</form>
</div>

117
ui/src/kapacitor/components/TelegramConfig.js
View File

@ -44,86 +44,65 @@ const TelegramConfig = React.createClass({
const stateChangesOnly = options['state-changes-only'];
return (
<div className="panel-body">
<div>
<h4 className="text-center">Telegram Alert</h4>
<br/>
<p>You can have alerts sent to Telegram by entering info below.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
You can have alerts sent to Telegram by entering info below.
</p>
<div className="form-group col-xs-12">
<label htmlFor="url">Telegram URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group">
<label htmlFor="url">Telegram URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group col-xs-12">
<label htmlFor="token">Token</label>
<input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
<label className="form-helper">Note: a value of <code>true</code> indicates the Telegram token has been set</label>
</div>
<div className="form-group">
<label htmlFor="token">Token</label>
<input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
<span>Note: a value of <code>true</code> indicates the Telegram token has been set</span>
</div>
<div className="form-group">
<label htmlFor="chat-id">Chat ID</label>
<input className="form-control" id="chat-id" type="text" ref={(r) => this.chatID = r} defaultValue={chatID || ''}></input>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={parseMode} ref={(r) => this.parseMode = r} />
Enable Parse Mode
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
Disable Web Page Preview
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
Disable Notification
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
Send all alerts without marking them explicitly in TICKscript
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
Send alerts on state change only
</label>
</div>
</div>
<div className="form-group col-xs-12">
<label htmlFor="chat-id">Chat ID</label>
<input className="form-control" id="chat-id" type="text" ref={(r) => this.chatID = r} defaultValue={chatID || ''}></input>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="enableParseMode" type="checkbox" defaultChecked={parseMode} ref={(r) => this.parseMode = r} />
<label htmlFor="enableParseMode">Enable Parse Mode</label>
</div>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="disableWebPagePreview" type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
<label htmlFor="disableWebPagePreview">Disable Web Page Preview</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="disableNotification" type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
<label htmlFor="disableNotification">Disable Notification</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="sendAllAlertsWithoutMarking" type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
<label htmlFor="sendAllAlertsWithoutMarking">Send all alerts without marking them explicitly in TICKscript</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input id="stateChangesOnly" type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
<label htmlFor="stateChangesOnly">Send alerts on state change only</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</form>
</div>
);

14
ui/src/kapacitor/components/ValuesSection.js
View File

@ -101,8 +101,8 @@ const Threshold = React.createClass({
<p>Send Alert where</p>
<span>{query.fields.length ? query.fields[0].field : 'Select a Metric'}</span>
<p>is</p>
<Dropdown className="size-176" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<input className="form-control input-sm size-166" type="text" ref={(r) => this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange}></input>
<Dropdown className="size-176 dropdown-kapacitor" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<input className="form-control input-sm size-166 form-control--green" type="text" ref={(r) => this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange}></input>
</div>
);
},
@ -145,13 +145,13 @@ const Relative = React.createClass({
return (
<div className="value-selector">
<p>Send Alert when</p>
<Dropdown className="size-106"items={changes} selected={change} onChoose={this.handleDropdownChange} />
<Dropdown className="size-106 dropdown-kapacitor"items={changes} selected={change} onChoose={this.handleDropdownChange} />
<p>compared to previous</p>
<Dropdown className="size-66" items={shifts} selected={shift} onChoose={this.handleDropdownChange} />
<Dropdown className="size-66 dropdown-kapacitor" items={shifts} selected={shift} onChoose={this.handleDropdownChange} />
<p>is</p>
<Dropdown className="size-176" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<Dropdown className="size-176 dropdown-kapacitor" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<input
className="form-control input-sm size-166"
className="form-control input-sm size-166 form-control--green"
ref={(r) => this.input = r}
defaultValue={value}
onKeyUp={this.handleInputChange}
@ -186,7 +186,7 @@ const Deadman = React.createClass({
return (
<div className="value-selector">
<p>Send Alert if Data is missing for</p>
<Dropdown className="size-66" items={periods} selected={this.props.rule.values.period} onChoose={this.handleChange} />
<Dropdown className="size-66 dropdown-kapacitor" items={periods} selected={this.props.rule.values.period} onChoose={this.handleChange} />
</div>
);
},

46
ui/src/kapacitor/components/VictorOpsConfig.js
View File

@ -31,39 +31,29 @@ const VictorOpsConfig = React.createClass({
const {url} = options;
return (
<div className="panel-body">
<div>
<h4 className="text-center">VictorOps Alert</h4>
<br/>
<p>Have alerts sent to VictorOps.</p>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
Have alerts sent to VictorOps
</p>
<div className="form-group">
<label htmlFor="api-key">API Key</label>
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
<span>Note: a value of <code>true</code> indicates the VictorOps API key has been set</span>
</div>
<div className="form-group">
<label htmlFor="routing-key">Routing Key</label>
<input className="form-control" id="routing-key" type="text" ref={(r) => this.routingKey = r} defaultValue={routingKey || ''}></input>
</div>
<div className="form-group">
<label htmlFor="url">VictorOps URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
</div>
<div className="form-group col-xs-12">
<label htmlFor="api-key">API Key</label>
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
<label className="form-helper">Note: a value of <code>true</code> indicates the VictorOps API key has been set</label>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
<div className="form-group col-xs-12">
<label htmlFor="routing-key">Routing Key</label>
<input className="form-control" id="routing-key" type="text" ref={(r) => this.routingKey = r} defaultValue={routingKey || ''}></input>
</div>
<div className="form-group col-xs-12">
<label htmlFor="url">VictorOps URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</form>
</div>

95
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;
return (
<div className="kapacitor">
<div className="chronograf-header">
<div className="chronograf-header__container">
<div className="chronograf-header__left">
<div className="page">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
<h1>
Configure Kapacitor
</h1>
</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-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>
</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>
</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>
<input ref={(r) => this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}></input>
</div>
<div className="form-group col-xs-12 col-sm-4 col-md-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="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 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>
<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="form-group col-xs-4 col-xs-offset-4">
<button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-8 col-md-offset-2">
{this.renderAlertOutputs()}
<div className="row">
<div className="col-md-8 col-md-offset-2">
{this.renderAlertOutputs()}
</div>
</div>
</div>
</div>
@ -186,8 +187,10 @@ export const KapacitorPage = React.createClass({
}
return (
<div className="panel-body">
Set your Kapacitor connection info to configure alerting endpoints.
<div className="panel panel-minimal">
<div className="panel-body">
<p>Set your Kapacitor connection info to configure alerting endpoints.</p>
</div>
</div>
);
},

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

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

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

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

2
ui/src/shared/components/Dropdown.js
View File

@ -51,7 +51,7 @@ const Dropdown = React.createClass({
<ul className="dropdown-menu show">
{items.map((item, i) => {
return (
<li className={`dropdown ${className}__item`} key={i}>
<li className="dropdown-item" key={i}>
<a href="#" onClick={() => self.handleSelection(item)}>
{item.text}
</a>

12
ui/src/sources/containers/CreateSource.js
View File

@ -41,16 +41,16 @@ export const CreateSource = React.createClass({
render() {
return (
<div id="select-source-page">
<div className="select-source-page" id="select-source-page">
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-summer">
<div className="panel panel-minimal">
<div className="panel-heading text-center">
<h2 className="deluxe">Welcome to Chronograf</h2>
</div>
<div className="panel-body">
<h4 className="text-center">Connect to a New Server</h4>
<h4 className="text-center">Connect to a New Source</h4>
<br/>
<form onSubmit={this.handleNewSource}>
@ -73,11 +73,11 @@ export const CreateSource = React.createClass({
</div>
</div>
<div className="form-group col-xs-8 col-xs-offset-2">
<label htmlFor="telegraf">Telegraf database</label>
<label htmlFor="telegraf">Telegraf Database</label>
<input ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" type="text" defaultValue="telegraf"></input>
</div>
<div className="form-group col-xs-12 text-center">
<button className="btn btn-success" type="submit">Create New Server</button>
<div className="form-group form-group-submit col-xs-12 text-center">
<button className="btn btn-success" type="submit">Connect New Source</button>
</div>
</form>
</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'}`;
return (
<div id="manage-sources-page">
<div className="chronograf-header">
<div className="chronograf-header__container">
<div className="chronograf-header__left">
<div className="page" id="manage-sources-page">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
<h1>InfluxDB Sources</h1>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="page-contents">
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="panel panel-minimal">
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
<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>
</div>
<div className="panel-body">
<div className="table-responsive margin-bottom-zero">
<table className="table v-center margin-bottom-zero">
<thead>
<tr>
<th>Name</th>
<th>Host</th>
<th>Kapacitor</th>
<th className="text-right"></th>
</tr>
</thead>
<tbody>
{
sources.map((source) => {
return (
<tr key={source.id}>
<td>{source.name}{source.default ? <span className="label label-primary">Default</span> : null}</td>
<td>{source.url}</td>
<td>{_.get(source, ['kapacitor', 'name'], '')}</td>
<td className="text-right">
<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>
<button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}>Delete</button>
</td>
</tr>
);
})
}
</tbody>
</table>
<div className="panel panel-minimal">
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
<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>
</div>
<div className="panel-body">
<div className="table-responsive margin-bottom-zero">
<table className="table v-center margin-bottom-zero">
<thead>
<tr>
<th>Name</th>
<th>Host</th>
<th>Kapacitor</th>
<th className="text-right"></th>
</tr>
</thead>
<tbody>
{
sources.map((source) => {
return (
<tr key={source.id}>
<td>{source.name}{source.default ? <span className="default-source-label">Default</span> : null}</td>
<td>{source.url}</td>
<td>{_.get(source, ['kapacitor', 'name'], '')}</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>
<button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}><span className="icon trash"></span></button>
</td>
</tr>
);
})
}
</tbody>
</table>
</div>
</div>
</div>
</div>

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

@ -82,58 +82,57 @@ export const SourceForm = React.createClass({
}
return (
<div id="source-form-page">
<div className="chronograf-header">
<div className="chronograf-header__container">
<div className="chronograf-header__left">
<div className="page" id="source-form-page">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
<h1>
{editMode ? "Edit Source" : "Add a New Source"}
</h1>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-summer">
<div className="panel-body">
<h4 className="text-center">Connection Details</h4>
<br/>
<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">
<h4 className="text-center">Connection Details</h4>
<br/>
<form onSubmit={this.handleSubmit}>
<div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<form onSubmit={this.handleSubmit}>
<div className="form-group col-xs-12 col-sm-6">
<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>
</div>
<div className="form-group col-xs-6 col-sm-4">
<div className="form-group col-xs-12 col-sm-6">
<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>
</div>
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
<div className="form-group col-xs-12 col-sm-6">
<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>
</div>
<div className="form-group col-xs-6 col-sm-4">
<div className="form-group col-xs-12 col-sm-6">
<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>
</div>
<div className="form-group col-xs-8 col-xs-offset-2">
<div className="form-group col-xs-12">
<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>
</div>
<div className="form-group col-xs-8 col-xs-offset-2">
<div className="form-group col-xs-12">
<div className="form-control-static">
<input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
<label htmlFor="defaultSourceCheckbox">Make this the default source</label>
</div>
</div>
</div>
<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>
</div>
</form>
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
<button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
</div>
</form>
</div>
</div>
</div>
</div>

2
ui/src/style/_SideNav.scss
View File

@ -316,7 +316,7 @@ $sidebar-logo-color: $g8-storm;
color: $g20-white;
height: $sidebar-width;
line-height: $sidebar-width;
font-size: 20px;
font-size: 17px;
text-transform: uppercase;
font-weight: 400;
padding: 0px $sidebar-menu-gutter;

14
ui/src/style/chronograf/components/_Explorer.scss
View File

@ -137,20 +137,6 @@
.dropdown-toggle {
width: 160px;
text-align: left;
position: relative;
.caret {
position: absolute;
top: calc(50% + 1px);
right: 13px;
transform: translateY(-50%);
}
}
.dropdown-menu {
width: 100%;
min-width: 100%;
max-width: 100%;
}
}

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

@ -1,134 +1,20 @@
.sessions-dropdown {
margin: 0 0 0 4px !important;
&__item {
position: relative;
&:hover {
a {
background-color: $g7-graphite;
}
.dropdown-item__actions {
opacity: 1;
}
}
> a {
padding: 8px 65px 8px 11px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
margin: 0 0 0 4px;
.dropdown-toggle {
text-align: left;
position: relative;
width: 21em;
.caret {
position: absolute;
top: calc(50% + 1px);
right: 13px;
transform: translateY(-50%);
}
}
.dropdown-menu {
width: 100%;
max-height: 450px;
overflow: auto;
&::-webkit-scrollbar {
width: 16px;
background-color: $g3-castle;
border-radius: 8px;
}
&::-webkit-scrollbar-button {
background-color: $g3-castle;
}
&::-webkit-scrollbar-track {
background-color: $g3-castle;
border-radius: 8px;
}
&::-webkit-scrollbar-track-piece {
background-color: $g3-castle;
border-radius: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: $g8-storm;
border: 4px solid $g3-castle;
border-radius: 8px;
}
&::-webkit-scrollbar-corner {
background-color: $g3-castle;
}
&::-webkit-resizer {
background-color: $g3-castle;
}
}
.dropdown-item__actions {
position: absolute;
top: 50%;
right: 11px;
transform: translateY(-50%);
display: flex;
justify-content: flex-end;
align-items: center;
transition: opacity 0.25s ease;
opacity: 0;
}
.dropdown-item__action {
border: 0;
margin-left: 4px;
border-radius: $radius;
width: 24px;
height: 24px;
background-color: transparent;
color: $g10-wolf;
transition:
background-color 0.25s ease,
color 0.25s ease;
&:hover {
cursor: pointer;
color: $g20-white;
background-color: $g9-mountain;
}
.icon {
font-size: 12px;
position: relative;
top: -2px;
}
width: 227px;
border-radius: 3px 0 0 3px;
}
}
.sessions-dropdown__btn {
margin: 0 0 0 4px;
margin: 0;
border-radius: 0 3px 3px 0;
}
.group-by-time-dropdown {
.group-by-time-dropdown .dropdown-toggle {
width: $group-by-time-dropdown-width;
.caret {
position: absolute;
top: calc(50% + 1px);
right: 13px;
transform: translateY(-50%);
}
.dropdown-toggle {
text-align: left;
width: 100%;
}
.dropdown-menu {
width: $group-by-time-dropdown-width;
min-width: 2em; // Override bootstrap min-width
}
}
.source-indicator {
padding: 4px 8px;
padding: 3px 9px;
border: 2px solid $g5-pepper;
background-color: $g5-pepper;
color: $g13-mist;
@ -136,11 +22,11 @@
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
margin-right: 18px;
margin-right: 16px;
> .icon {
display: inline-block;
font-size: 16px;
margin: 0 5px 0 0;
margin: 0 4px 0 -2px;
}
}
}

545
ui/src/style/enterprise_style/_enterprise-custom.scss
View File

@ -1,7 +1,9 @@
/*
This is a bunch of stuff built on top of the bootstrap theme for the Chronograf app.
*/
html, body {
background-color: $g0-obsidian;
}
body {
display: flex;
padding: 0;
@ -9,24 +11,18 @@ body {
height: 100%;
position: absolute;
align-items: stretch;
/* Ensures sidebar and page-wrapper go full-height */
overflow: hidden;
background-color: $g0-obsidian;
}
/*
Chronograf Select Host Page
----------------------------------------------
*/
body > #react-root {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
> #react-root {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.container {
margin-top: 60px;
.container {
margin-top: 60px;
}
}
}
@ -34,76 +30,66 @@ body > #react-root {
Layout
----------------------------------------------
*/
.chronograf-wrapper {
.chronograf-root {
display: flex;
align-items: stretch;
position: absolute;
width: 100%;
position: relative;
> div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&--flex {
display: flex;
align-items: stretch;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
height: 100%;
top: 0;
left: 0;
color: $g17-whisper;
}
.container-fluid {
/* Overriding left and right padding from the theme to be more spacious */
padding-left: $page-wrapper-padding;
padding-right: $page-wrapper-padding;
max-width: $page-wrapper-max-width;
}
.page-wrapper,
.sidebar {
display: block;
}
.page-wrapper {
.page {
position: relative;
flex-grow: 1;
overflow: hidden;
@include gradient-v($g18-cloud, $g19-ghost);
}
.signup-flow-bg {
background-image: url(/assets/images/signup-bg.png);
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
}
.page-wrapper > div:not(.flash-messages):not(.page-spinner):not(.kapacitor-rule-page):not(.data-explorer-container) {
.page-contents {
position: absolute;
top: 0;
top: $chronograf-page-header-height;
left: 0;
width: 100%;
height: 100%;
height: calc(100% - #{$chronograf-page-header-height});
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar($g2-kevlar,$c-pool);
@include gradient-v($g2-kevlar,$g0-obsidian);
&--green-scrollbar {
@include custom-scrollbar($g2-kevlar,$c-rainforest);
}
&--purple-scrollbar {
@include custom-scrollbar($g2-kevlar,$c-comet);
}
}
.container-fluid {
padding: ($chronograf-page-header-height / 2) $page-wrapper-padding ($chronograf-page-header-height / 2) $page-wrapper-padding;
max-width: $page-wrapper-max-width;
&.full-width {
max-width: 100%;
}
}
/*
Chronograf Page Header
Page Header
----------------------------------------------
*/
.chronograf-header {
background-color: $g20-white;
.page-header {
height: $chronograf-page-header-height;
margin-bottom: 15px;
width: 100%;
padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
background-color: $g0-obsidian;
border: none;
margin: 0;
&__container {
width: 100%;
@ -115,7 +101,7 @@ body > #react-root {
}
h1 {
text-transform: uppercase;
font-size: 20px;
font-size: 17px;
font-weight: 400;
margin: 0;
display: inline-block;
@ -140,42 +126,44 @@ body > #react-root {
margin: 0 0 0 4px;
}
}
&.full-width .page-header__container {
max-width: 100%;
}
}
.minimal-dropdown {
.dropdown-toggle {
font-size: 20px;
font-weight: 400;
background-color: transparent;
border: none;
/*
Custom Search Widget
----------------------------------------------
*/
.users__search-widget {
position: relative;
&:hover {
.button-text {
color: $g10-wolf;
}
.caret {
color: $g10-wolf;
}
input.form-control {
position: relative;
width: 100%;
z-index: 1;
padding-left: 34px;
border-radius: 4px !important;
&:focus + .input-group-addon {
color: $c-pool;
}
}
.button-text,
.caret {
display: inline-block;
vertical-align: middle;
}
.button-text {
transition: color 0.25s ease;
}
.caret {
transition: color 0.25s ease;
}
&.open {
.button-text {
color: $g10-wolf;
}
.caret {
color: $g10-wolf;
}
.input-group-addon {
padding: 0;
text-align: center;
line-height: 38px;
position: absolute;
color: $g10-wolf;
top: 0;
left: 0;
height: 100%;
z-index: 4;
border: 0;
width: 40px;
background-color: transparent;
transition:
color 0.25s ease;
}
}
@ -183,6 +171,33 @@ body > #react-root {
Unsorted
----------------------------------------------
*/
.select-source-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
@include custom-scrollbar($g2-kevlar, $c-pool);
@include gradient-v($g2-kevlar, $g0-obsidian);
}
.text-right .btn {
margin: 0 0 0 4px;
}
.text-center .btn {
margin: 0 2px;
}
.default-source-label {
display: inline-block;
vertical-align: middle;
font-size: 13px;
font-weight: 500;
background-color: $g5-pepper;
color: $c-pool;
border-radius: 3px;
padding: 2px 6px;
margin-left: 4px;
}
.progress-label {
margin-bottom: 4px;
color: $g11-sidewalk;
@ -193,31 +208,6 @@ body > #react-root {
color: $g8-storm;
}
}
.flex-group {
margin: 0;
.flex-space {
display: inline-block;
width: 20px;
}
}
.main {
margin-top: 60px;
}
.fake-panel-title {
margin-top: 25px;
margin-bottom: 25px;
&.match-search {
padding-top: 7px;
padding-bottom: 7px;
}
}
.modal#dbModal {
.modal-body {
width: 100%;
display: inline-block;
}
}
.btn-block.dropdown-toggle {
text-align: left;
position: relative;
@ -233,9 +223,6 @@ body > #react-root {
width: 100%;
}
}
.pointer {
cursor: pointer;
}
.modal {
form {
padding: 0;
@ -251,146 +238,6 @@ body > #react-root {
}
}
}
#accordion {
.panel-heading {
color: gray;
align-items: center;
.progress {
width: 200px;
margin: 0 20px;
}
}
}
.continuous-queries {
h1, h2, h3, h4, h5, h6 {
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
}
pre code {
white-space: normal;
}
&__empty {
text-align: center;
padding: 60px 0;
color: $g15-platinum;
h1, h2, h3, h4, h5, h6 {
padding-bottom: 0;
border-bottom: none;
font-weight: 400;
}
img {
width: 100px;
height: auto;
margin-bottom: 30px;
}
}
}
.product-buttons {
margin-bottom: 20px;
}
$telegraf: #f95f53;
$influxdb: #4591ED;
$kapacitor: #4ED8A0;
$chronograf: #C557FF;
.influxdb-bg {
background-color: $influxdb;
}
.telegraf-bg {
background-color: $telegraf;
}
.chronograf-bg {
background-color: $chronograf;
}
.kapacitor-bg {
background-color: $kapacitor;
}
.btn-telegraf {
@extend .telegraf-bg;
&.inactive {
background-color: lighten($telegraf, 25%);
color: #000000;
}
}
.btn-influxdb {
@extend .influxdb-bg;
&.inactive {
background-color: lighten($influxdb, 25%);
color: #000000;
}
}
.btn-chronograf {
@extend .chronograf-bg;
&.inactive {
background-color: lighten($chronograf, 25%);
color: #000000;
}
}
.btn-kapacitor {
@extend .kapacitor-bg;
&.inactive {
background-color: lighten($kapacitor, 25%);
color: #000000;
}
}
.pinger {
color: #fff;
}
.ping-pending {
color: yellow;
animation: blinker 1s linear infinite;
}
.ping-success {
color: green;
}
.ping-failure {
color: red;
}
@keyframes blinker {
50% {
opacity: 0.0;
}
}
.profile-info {
color: #fff;
text-align: right;
}
a {
&.btn {
color: #fff;
}
}
.caret {
cursor: pointer;
}
/*
Custom Tabs
@ -436,55 +283,6 @@ a {
}
}
.flash-messages {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 570px;
top: 36px;
z-index: 9999;
.alert {
font-size: 16px;
font-weight: 500;
border-width: 0;
color: $g20-white;
&.alert-success {
background-color: $c-rainforest;
}
&.alert-primary {
background-color: $c-pool;
}
&.alert-warning {
background-color: $c-comet;
}
&.alert-danger {
background-color: $c-dreamsicle;
}
button.close {
position: absolute;
top: 50%;
right: 13px;
transform: translateY(-50%);
font-size: 16px;
text-shadow: none;
opacity: 0.6;
transition: opacity 0.25s ease;
.icon {
color: $g20-white;
text-shadow: none;
}
&:hover {
opacity: 1;
}
}
}
}
/*
Error Pages
@ -528,64 +326,6 @@ table.table.error-table {
}
}
/*
Database Manager polish
----------------------------------------------
*/
.db-manager-stats {
display: flex;
align-items: center;
justify-content: space-between;
h4 {
margin-bottom: 4px;
}
p {
color: $g12-forge;
}
}
/*
Cluster Renaming UI
----------------------------------------------
*/
.cluster-dropdown {
&__item {
position: relative;
&:hover {
.cluster-dropdown__rename {
opacity: 1;
}
a {
background-color: $c-laser;
color: $g20-white;
}
}
}
&__rename {
z-index: 2;
opacity: 0;
position: absolute;
top: 50%;
right: 0;
width: 34px;
height: 100%;
transform: translateY(-50%);
border: 0;
background-color: transparent;
color: $c-hydrogen;
transition:
opacity 0.25s ease,
color 0.25s ease;
&:hover {
color: $g20-white;
cursor: pointer;
}
}
}
/*
Generic Empty State
----------------------------------------------
@ -603,20 +343,16 @@ table.table.error-table {
}
}
.cluster-accounts > *:not(:last-child) {
margin-bottom: 12px;
}
/*
Static Form Controls
----------------------------------------------
*/
$form-static-checkbox-size: 16px;
.form-control-static {
border: 2px solid $g17-whisper;
height: 40px;
border: 2px solid $g5-pepper;
height: auto;
border-radius: 4px;
padding: 0 18px;
line-height: 36px;
padding: 7px 12px;
position: relative;
input[type="checkbox"] {
@ -629,8 +365,13 @@ table.table.error-table {
// Faux Checkbox
& + label {
font-size: 14px !important;
line-height: 16px;
color: $g11-sidewalk;
font-weight: 500;
transition: color 0.25s ease;
margin-left: 24px;
margin: 0;
padding: 0 0 0 (12px + $form-static-checkbox-size + 6px);
user-select: none;
-ms-user-select: none;
-moz-user-selct: none;
@ -640,22 +381,22 @@ table.table.error-table {
content: '';
position: absolute;
top: 50%;
left: 18px;
left: 12px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: $g18-cloud;
border: 2px solid $g17-whisper;
width: $form-static-checkbox-size;
height: $form-static-checkbox-size;
background-color: $g2-kevlar;
border: 2px solid $g5-pepper;
border-radius: 3px;
z-index: 2;
transition:
background-color 0.25s ease;
border-color 0.25s ease;
}
&:after {
content: '';
position: absolute;
top: 50%;
left: (18px + (16px / 2));
left: (12px + ($form-static-checkbox-size / 2));
transform: translate(-50%,-50%) scale(2,2);
opacity: 0;
width: 6px;
@ -669,15 +410,16 @@ table.table.error-table {
}
&:hover {
cursor: pointer;
color: $g20-white;
&:before {
background-color: $g20-white;
border-color: $g6-smoke;
}
}
}
// Faux Checkbox (Checked)
&:checked + label {
color: $c-pool;
color: $g20-white;
&:after {
opacity: 1;
@ -686,15 +428,6 @@ table.table.error-table {
}
}
}
/*
Button alignment in tables
----------------------------------------------
*/
table .text-right .btn {
margin: 0 0 0 6px;
}
/*
Stuff for making Tables of Data more readable
@ -731,20 +464,6 @@ table .monotype {
}
}
/*
Sources / Kapacitor Config Pages
----------------------------------------------
*/
#source-form-page,
#manage-sources-page,
.kapacitor {
.chronograf-header {
margin-bottom: 45px;
}
}
/*
Empty State for Tables
----------------------------------------------
@ -766,4 +485,4 @@ table .monotype {
margin-bottom: 75px;
}
}
}
}

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

@ -4,14 +4,14 @@
@import 'font-awesome';
@import 'fonts';
@import 'theme';
@import 'theme-dark';
@import 'tasks';
@import 'users';
@import 'sub-page';
@import 'roles';
@import 'retention-policies';
@import 'signup';
@import 'modals';
@import 'enterprise-custom';
@import 'flash-messages';
@import 'dygraph-override';
@import 'auth-page';
@import 'hosts';

52
ui/src/style/enterprise_style/flash-messages.scss Normal file
View File

@ -0,0 +1,52 @@
/*
Styles for Flash Messages
----------------------------------------------
*/
.flash-messages {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 570px;
top: 36px;
z-index: 9999;
.alert {
font-size: 16px;
font-weight: 500;
border-width: 0;
color: $g20-white;
&.alert-success {
background-color: $c-rainforest;
}
&.alert-primary {
background-color: $c-pool;
}
&.alert-warning {
background-color: $c-comet;
}
&.alert-danger {
background-color: $c-dreamsicle;
}
button.close {
position: absolute;
top: 50%;
right: 13px;
transform: translateY(-50%);
font-size: 16px;
text-shadow: none;
opacity: 0.6;
transition: opacity 0.25s ease;
.icon {
color: $g20-white;
text-shadow: none;
}
&:hover {
opacity: 1;
}
}
}
}

162
ui/src/style/enterprise_style/hosts.scss
View File

@ -1,146 +1,7 @@
/*
Hosts Dashboard
Styles for Hosts List & Host View
----------------------------------------------
*/
.kapacitor-rules-page,
.hosts-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden !important;
@include gradient-v($g2-kevlar,$g0-obsidian);
color: $g17-whisper;
.chronograf-header {
position: absolute;
top: 0;
width: 100%;
margin: 0;
background-color: $g0-obsidian;
}
.hosts-page-scroll-container {
position: absolute;
top: $chronograf-page-header-height;
left: 0;
width: 100%;
height: calc(100% - #{$chronograf-page-header-height});
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar($g2-kevlar,$c-pool);
.container-fluid {
padding-bottom: ($chronograf-page-header-height / 2);
}
}
.panel-minimal {
border: 0;
.panel-title {
color: $g17-whisper !important;
}
.panel-body {
padding: 30px;
background-color: $g3-castle;
border: 0;
color: $g17-whisper;
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
table {
th,td {
border-color: $g5-pepper;
}
th {
color: $g17-whisper;
}
td {
color: $g14-chromium;
}
tbody tr:last-child td {
border-bottom: 2px solid $g5-pepper;
}
}
}
}
.users__search-widget {
position: relative;
input.form-control {
position: relative;
width: 100%;
z-index: 1;
background-color: $g2-kevlar;
border-color: $g5-pepper;
color: $g17-whisper;
border-radius: 4px;
padding-left: 34px;
&:focus {
border-color: $c-pool !important;
color: $c-pool;
&::-webkit-input-placeholder {
color: $c-pool;
}
&::-moz-placeholder {
color: $c-pool;
}
&:-ms-input-placeholder {
color: $c-pool;
}
&:-moz-placeholder {
color: $c-pool;
}
& + .input-group-addon {
color: $c-pool;
}
}
&::-webkit-input-placeholder {
color: $g11-sidewalk;
}
&::-moz-placeholder {
color: $g11-sidewalk;
}
&:-ms-input-placeholder {
color: $g11-sidewalk;
}
&:-moz-placeholder {
color: $g11-sidewalk;
}
}
.input-group-addon {
padding: 0;
text-align: center;
line-height: 38px;
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 2;
border: 0;
width: 40px;
background-color: transparent;
transition:
color 0.25s ease;
}
}
}
.hosts-dashboard {
max-width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}
.graph-panel__graph-container.hosts-graph {
padding: 8px 16px;
}
@ -155,26 +16,6 @@
color: $g14-chromium;
border-radius: 4px 4px 0 0;
}
.hosts-dashboard-header {
.chronograf-header__container {
max-width: 100%;
}
.chronograf-header__left {
flex-direction: row;
align-items: center;
> * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
.chronograf-header__right {
font-size: inherit;
}
}
.host-list--active-source {
text-transform: uppercase;
font-size: 15px;
@ -233,7 +74,6 @@
}
}
}
.host-table-header {
display: flex;
align-items: center;

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

@ -21,38 +21,6 @@ $kap-dot-color: $c-rainforest;
$kapacitor-font-sm: 13px;
.kapacitor-rule-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
@include gradient-v($g2-kevlar,$g0-obsidian);
color: $g17-whisper;
.chronograf-header {
background-color: $g0-obsidian;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
}
.rule-builder-wrapper {
position: absolute;
top: $chronograf-page-header-height;
left: 0;
width: 100%;
height: calc(100% - #{$chronograf-page-header-height});
overflow: auto;
@include custom-scrollbar($g0-obsidian,$kapacitor-accent);
.container-fluid {
padding-bottom: $chronograf-page-header-height;
}
}
.rule-builder {
width: 100%;
display: flex;
@ -204,6 +172,10 @@ div.query-editor.kapacitor-metric-selector {
border-radius: $kap-radius-lg $kap-radius-lg 0 0;
border: 0;
padding: $kap-padding-md $kap-padding-lg;
code {
line-height: 1.5em;
}
}
// Tabs
@ -553,8 +525,7 @@ div.query-editor.kapacitor-metric-selector {
.rule-builder {
input[type="text"] {
background-color: $kapacitor-graphic-color;
color: $kapacitor-accent;
border-color: $g5-pepper;
color: $kapacitor-accent !important;
font-weight: 600;
font-size: $kapacitor-font-sm;
font-family: Consolas, "Lucida Console", Monaco, monospace;
@ -564,7 +535,7 @@ div.query-editor.kapacitor-metric-selector {
border-color: $kapacitor-accent;
outline: none;
box-shadow: none;
color: $g20-white;
color: $g20-white !important;
}
}
.dropdown-toggle,
@ -615,40 +586,6 @@ div.query-editor.kapacitor-metric-selector {
.size-49 {
width: 49px;
}
.dropdown-menu {
width: 100%;
min-width: 100%;
padding: 0;
margin: 0;
border-radius: 4px;
@include gradient-v($c-viridian,$c-ocean);
> li {
width: 100%;
}
> li > a {
text-transform: capitalize;
font-size: $kapacitor-font-sm;
padding: ($kap-padding-sm / 2) $kap-padding-sm;
font-weight: 600;
color: transparentize($g20-white, 0.25);
border-radius: 0;
&:hover {
background-color: $c-rainforest;
color: $g20-white;
}
}
> li:first-child > a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
> li:last-child > a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
}
.chronograf-header__editable {
@ -656,6 +593,13 @@ div.query-editor.kapacitor-metric-selector {
&:hover {
color: $g13-mist;
cursor: text !important;
}
.icon {
cursor: inherit;
margin-left: 5px;
position: relative;
top: -1.5px;
}
}
.chronograf-header__editing {

11
ui/src/style/enterprise_style/modals.scss
View File

@ -1,11 +0,0 @@
#welcomeModal {
.modal-header,
.modal-footer, {
display: flex;
justify-content: center;
}
}
.modal-error {
color: red;
}

24
ui/src/style/enterprise_style/sub-page.scss
View File

@ -1,24 +0,0 @@
.panel-group.sub-page {
.panel {
margin-bottom: 16px;
}
.panel-collapse > .panel-body {
border-top: 2px solid $g19-ghost;
}
.panel-heading {
padding: 10px 30px;
.panel-title a[data-toggle="collapse"] {
font-weight: 400;
}
p {
margin: 0 20px 0 0;
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
}
}

357
ui/src/style/enterprise_style/theme-dark.scss Normal file
View File

@ -0,0 +1,357 @@
/*
Dark Theme Styles
----------------------------------------------
This stylesheet has overrides for the theme, so you are
going to see al ot of !important =(
This is design debt. One day the theme will not have to be overrided
*/
/*
Dark Panel Styles
----------------------------------------------
*/
.row:only-child .panel,
.row:last-child .panel {
margin-bottom: 0;
}
.panel hr {
background-color: $g5-pepper;
}
.panel-minimal {
border: 0;
.panel-title {
color: $g10-wolf !important;
}
.panel-body {
padding: 30px;
background-color: $g3-castle;
border: 0;
color: $g13-mist;
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
table {
th,td {
border-color: $g5-pepper;
}
th {
color: $g17-whisper;
}
td {
color: $g14-chromium;
}
tbody tr:last-child td {
border-bottom: 2px solid $g5-pepper;
}
}
}
}
/*
Dark Buttons
----------------------------------------------
*/
.btn {
border: 0;
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease;
}
.btn.btn-sm {
font-size: 13px;
line-height: 30px !important;
height: 30px !important;
padding: 0 9px !important;
}
.btn.btn-xs .icon {
position: relative;
top: -1px;
}
/*
Dark Inputs
----------------------------------------------
*/
.form-group {
margin-bottom: 9px;
}
.form-group label {
font-size: 12px;
line-height: 12px;
font-weight: 600;
margin-bottom: 4px;
padding: 0 13px;
}
.form-control {
padding: 0 13px;
background-color: $g2-kevlar !important;
border-color: $g5-pepper !important;
color: $g15-platinum !important;
&::-webkit-input-placeholder { color: $g10-wolf; }
&::-moz-placeholder { color: $g10-wolf; }
&:-ms-input-placeholder { color: $g10-wolf; }
&:-moz-placeholder { color: $g10-wolf; }
&:hover {
border-color: $g6-smoke !important;
}
&:focus {
border-color: $c-pool !important;
box-shadow: 0 0 6px 0px $c-pool !important;
color: $g20-white !important;
}
&--green:focus {
border-color: $c-rainforest !important;
box-shadow: 0 0 6px 0px $c-rainforest !important;
}
}
.form-helper {
margin: 4px 0 !important;
font-weight: 400 !important;
font-style: italic;
line-height: 16px !important;
}
.form-group-submit {
margin-top: 30px;
}
/*
Dark Dropdowns
----------------------------------------------
*/
.dropdown-toggle {
position: relative;
text-align: left;
.caret {
position: absolute;
top: calc(50% + 1px);
right: 8px;
transform: translateY(-50%);
}
}
.dropdown-menu {
float: none !important;
width: 100%;
min-width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
min-height: 70px;
max-height: 290px;
overflow: auto;
@include custom-scrollbar($c-pool,$c-laser);
@include gradient-h($c-ocean,$c-pool);
box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8);
> li {
width: 100%;
font-size: 0px;
&:hover {
@include gradient-h($c-laser,$c-pool);
}
}
> li > a {
width: 100%;
border-radius: 0 !important;
display: inline-block;
padding: 7px 9px;
font-size: 13px;
line-height: 15px;
font-weight: 500;
color: $c-yeti !important;
background-color: transparent;
transition:
color 0.25s ease;
&:hover {
cursor: pointer;
background-color: transparent;
color: $g20-white !important;
}
}
> li:last-child a {
border-radius: 0 0 3px 3px;
}
> li:first-child a {
border-radius: 3px 3px 0 0;
}
}
.dropdown.dropdown-kapacitor .dropdown-menu {
@include custom-scrollbar($c-rainforest,$c-honeydew);
@include gradient-h($c-pool,$c-rainforest);
> li:hover {
@include gradient-h($c-laser,$c-rainforest);
}
> li > a {
color: $c-mint !important;
&:hover {
color: $g20-white !important;
}
}
}
.dropdown.dropdown-chronograf .dropdown-menu {
@include custom-scrollbar($c-comet,$c-potassium);
@include gradient-h($c-ocean,$c-comet);
> li:hover {
@include gradient-h($c-laser,$c-comet);
}
> li > a {
color: $c-cremedeviolette !important;
&:hover {
color: $g20-white !important;
}
}
}
/* Dropdown Actions */
.dropdown-item {
position: relative;
> a {
position: relative;
z-index: 1;
}
}
.dropdown-item__actions {
z-index: 2;
position: absolute;
top: 0;
right: 3px;
height: 100%;
width: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.dropdown-item__action {
padding: 0;
margin: 0;
width: 24px;
height: 24px;
border-radius: 2px;
background-color: transparent;
border: none !important;
font-size: 13px;
transition:
text-shadow 0.25s ease,
color 0.25s ease;
color: $c-sapphire;
&[data-target="#deleteExplorerModal"] .icon {
position: relative;
right: -1px;
}
&:hover {
color: $g20-white;
text-shadow:
0 0 2px $c-hydrogen,
0 0 3px $c-laser,
0 0 6px $c-ocean;
background-color: transparent;
}
}
/*
Dark Code Samples
----------------------------------------------
*/
code {
display: inline-block;
background-color: $g0-obsidian;
color: $c-comet;
border: 0 !important;
border-radius: 2px;
padding: 2.5px 5px 2.5px 4px;
margin: 0 1px 0 2px;
line-height: 11px;
}
/*
Dark Modals
----------------------------------------------
*/
.modal-backdrop {
background: $c-pool;
background: -moz-linear-gradient(-45deg, $c-pool 0%, $c-comet 100%);
background: -webkit-linear-gradient(-45deg, $c-pool 0%,$c-comet 100%);
background: linear-gradient(135deg, $c-pool 0%,$c-comet 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c-pool', endColorstr='$c-comet',GradientType=1 );
}
.modal-content {
background-color: $g3-castle;
}
.modal-header,
.modal-body,
.modal-footer {
background-color: transparent;
color: $g13-mist;
padding-left: ($sidebar-width / 2);
padding-right: ($sidebar-width / 2);
}
.modal-body {
padding-top: 0;
padding-bottom: 0;
}
.modal-title {
color: $g18-cloud !important;
}
.modal-header .close {
transition: none;
outline: none;
&:before,
&:after {
display: block;
content: '';
width: 20px;
height: 2px;
border-radius: 1px;
background-color: $g7-graphite;
transition: background-color 0.25s ease;
position: absolute;
top: 50%;
left: 50%;
}
&:before { transform: translate(-50%,-50%) rotate(45deg); }
&:after { transform: translate(-50%,-50%) rotate(-45deg); }
&:hover {
cursor: pointer;
&:before,
&:after {
background-color: $g13-mist;
}
}
span {
display: none;
}
}